vue中iview-table中行和列由数据动态生成,并且每列都需要使用复选框(使用iview-table的selection属性无法完成列的单独控制)

使用组件说明

Vue:https://cn.vuejs.org/v2/guide/
iview:https://www.iviewui.com/components/table

使用场景说明

表格中的行和列需要由后台数据动态生成,每列都需要提供复选框,用户选择需要列然后提交后台处理

代码效果

功能说明:每列可以全选,全部选,行可以单独选择

具体实现

1.通过数据动态生成表格(每列生成checkbox)

//vue代码
<Table ref="pagesTableTable" border :columns="checkColumns" :data="checkData"         
	class="Table-ul-li-size" :loading="loading"></Table>

//data中初始化列数据
data(){
           
	return {
   
		checkColumns: [ //表头列               
		    {
                       
			title: '表名',                    
			align: 'center',                    
			key: 'tableName'                   
		    }            
		],
		checkData:[] //表数据,
		selectData:[], //选中的数据,用于提交后台处理      
		checkeBox: {
   },//为每列复选框注册一个共同的开关,全选功能
	}
}
	
//通过js动态组装列,和数据
getAlgoTable(dpatList,tableList) {
   
    //生成表头            
    for(var i in dpatList){
   
	    //添加绑定的属性                
	    var codeType = dpatList[i].codeType;                
	    //确保这个新属性同样是响应式的，且触发视图更新 因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')                
	    this.$set(this.checkeBox,codeType,false);
	    //添加到列
	    this.checkColumns.push({
   
		titel: codeType,
		align: 'center',
		key: codeType,
		//通过render函数为每列添加checkbox并注册选中事件
		render:(h,params) => {
   
		     var _this = this;
		     return h('div',[                            
		      h('Checkbox',{
                                   
		       props: