el-table多选框点击表格选中和取消
程序员文章站
2022-03-07 14:21:12
...
<div>
<el-table ref='mytable' :data='dataList' @select-change='checkAll' @row-click='checkOne'>
<el-table-column type='selection'></el-table-column>
<el-table-column type='index' label='序号'></el-table-column>
<el-table-column v-foe=(item,index) in tableHead :label='item.label' :prop='item.prop'></el-table-column>
</el-table>
</div>
data(){
return{
dataList:[],
checkedAllList:[],
tableHead:[
{label:'id',prop:'1'},
{label:'name',prop:'ceshi'},
{label:'age',prop:'17'}
]
}
},
methods:{
// 全选
checkedAll(val){
this.checkedAllList=val;
},
//选中、取消
checkedOne(val){
if(val){
this.$refs.maytable.toggleSelection(val);
}else{
this.$refs.maytable.clearSelection(val);
}
}
}
推荐阅读