Element ui表单实现点击行数据单选,复选框打勾
实现:点击行数据时,数据选中,行数据前面的复选框也被勾选
<el-table
ref="multipleTable" //给表格添加ref,后面可以拿到表格实例
:data="formDta"
size="small"
highlight-current-row
@row-click="handleCurrentChange" //当行数据被点击时触发
@selection-change="select" //复选框 选择改变时触发
@select-all="selectAll" //复选框 选择时触发
\>
//选择改变时触发
select(selection) {
//selection是数组,每个数组元素代表选中的那一行的数据
if (selection.length > 1) {
let del_row = selection.shift(); //这个方法是删除selection数组的第一个元素,并返回第一个元素的值。
this.$refs.multipleTable.toggleRowSelection(del_row, false);
/* 用于多选表格,切换某一行的选中状态,
如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
这里将selection数组的上一个元素的值传入。并传入false,
设置为不被选中。 multipleTable是给表格添加的ref */
}
},
// 点击全部复选框时触发
selectAll(selection) {
this.$refs.multipleTable.clearSelection() //清除勾选
},
//单选
handleCurrentChange(row) { //row就是行信息
this.id = row.id;
this.$refs.multipleTable.toggleRowSelection(row) // 传入行信息,使得该行复选框打上勾
}
实现效果