el-table多选框点击表格选中和取消

2023-11-17

<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);
		}
	}
}


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-table多选框点击表格选中和取消 的相关文章

随机推荐