image.png
在table中引入了多選復(fù)選框
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
>
</el-table-column>
引入后 復(fù)選框的功能是element-ui自帶的多選功能
想要實(shí)現(xiàn)單選 代碼如下：
javascript
<el-table
:data="processedTableData"
border
highlight-current-row
@selection-change="clickcheck"
ref="processedTableData"
row-key="projectId"
style="width: 100%"
>
在table中的@selection-change綁定點(diǎn)擊事件，并且設(shè)置ref以及row-key唯一的id值，并且在復(fù)選框中設(shè)置reserve-selection指定row+key保留數(shù)據(jù)更新之前的數(shù)據(jù)（作用：有時(shí)候表格的數(shù)據(jù)是有分頁(yè)的,分頁(yè)一般是要重新請(qǐng)求后臺(tái)數(shù)據(jù),這樣上一頁(yè)也就是上一次請(qǐng)求的數(shù)據(jù)的選中狀態(tài)就沒(méi)有了）
clickcheck(val) {
if (val.length >= 2) {
let arrays = val.splice(0, val.length - 1);
arrays.forEach((row) => {
this.$refs.processedTableData.toggleRowSelection(row);
});
}
this.practiceList = val;
console.log(this.practiceList);
},
以上代碼就能實(shí)現(xiàn)單選功能了
