image.png
在table中引入了多选复选框
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
>
</el-table-column>
引入后 复选框的功能是element-ui自带的多选功能
想要实现单选 代码如下：
javascript
<el-table
:data="processedTableData"
border
highlight-current-row
@selection-change="clickcheck"
ref="processedTableData"
row-key="projectId"
style="width: 100%"
>
在table中的@selection-change绑定点击事件，并且设置ref以及row-key唯一的id值，并且在复选框中设置reserve-selection指定row+key保留数据更新之前的数据（作用：有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页也就是上一次请求的数据的选中状态就没有了）
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);
},
以上代码就能实现单选功能了
