vue中iview-table中⾏和列由数据动态⽣成，并且每列都需要使⽤复选框（使⽤ ivi。。。
iview-table中每列都使⽤复选框CheckBox
使⽤组件说明
rmc使⽤场景说明
表格中的⾏和列需要由后台数据动态⽣成，每列都需要提供复选框,⽤户选择需要列然后提交后台处理 代码效果
功能说明：每列可以全选，全部选,⾏可以单独选择
具体实现
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 ⽆法探测普通的新增属性 (⽐如 wProperty = 'hi')
this.$set(this.checkeBox,codeType,false);
//添加到列
this.checkColumns.push({
titel: codeType,
align:'center',蒙代尔国际企业家大学
align:'center',
key: codeType,
//通过render函数为每列添加checkbox并注册选中事件
render:(h,params)=>{
var _this =this;
return h('div',[
h('Checkbox',{
props:{
value: _this.lumn.key],//绑定数据},
on:{
"on-change":function(sign){
//传⼊选中参数，和复选框的标识
_SelectFun(lumn.w);
}
},
},lumn.key)
]);
}
//通过renderHeader函数为表头添加checkbox并注册选中事件 renderHeader:(h,params)=>{
var _this =this;
女人十日谈
return h('div',[
h('Checkbox',{
props:{
value: _this.lumn.key],//绑定数据},
on:{
"on-change":function(sign){
/
/全选⽅法，传⼊选中参数，和复选框的标识
_SelectAllFun(obj, lumn.key);
}
},
},lumn.key)
]);
}
});
}//列循环结束
//添加数据
for(var j in tableList){
let obj ={};
obj["tableName"]= tableList[j].tableName;
for(var k in dpatList){
obj[dpatList[k].codeType]= dpatList[k].codeType;
}
this.checkData.push(obj);
}
2.实现每个复选框的选择和取消选择
//将选中的数据添加到数组中,sign为复选框选择的标识onSelectFun(sign,key,row){
if(sign){
燃烧着心中不灭的光//创建储存的对象
var obj ={};
for(var i in row){
if(row[i]== key || i =="tableName"){
obj[i]= row[i];
}else{
obj[i]="";
}
}
//检验对象是否存在选中结果中，不存在则直接加⼊选中的结果中if(this.selectData.length ==0||this.isInclude(row.tableName)){ this.selectData.push(obj);
return;
滇西1994
}
//单属性添加到数据中
for(var j in this.selectData){
var checkObj =this.selectData[j];
if(checkObj.tableName == row.tableName){
checkObj[key]= row[key];
}
}
}else{
//删除取消选择的数据
for(let o in this.selectData){
if(this.selectData[o].tableName == row.tableName){
this.selectData[o][key]="";
}
}
}
},
//选择的结果是否包含tableName
isInclude(tableName){
for(var i in this.selectData){
if(this.selectData[i].tableName == tableName){
return false;
}
}
return true;
},
3.实现每列的全选和取消全选功能
onSelectAllFun(obj,val){
this.checkeBox[val]= obj;
//新增或删除数据
if(obj){
//遍历所有数据
for(var i in this.checkData){
var newObj ={};
var checkObj =this.checkData[i];
newObj[val]= checkObj[val];
newObj["tableName"]= checkObj.tableName;
//检验对象是否存在选中结果中，不存在则直接加⼊选中的结果中
if(this.selectData.length ==0||this.isInclude(checkObj.tableName)){
this.selectData.push(newObj);
continue;
}
//单属性添加
for(var j in this.selectData){
var selectObj =this.selectData[j];
if(selectObj.tableName == checkObj.tableName){
selectObj[val]= checkObj[val];
}
}
}
}else{
韩信巧点兵//取消选择数据
for(let o in this.selectData){
this.selectData[o][val]="";
}
}
},
4.清理没有选择的数据
getSelectObj(){
//检验数据中是否有空数据
for(let i=0;i<this.selectData.length;i++){
let obj =this.selectData[i];
let sign =true;
for(let j in obj){
//如果只有tablenName不为""，则为⽆效数据
if(j !="tableName"&& obj[j]!=""){
sign =false;
}
}
//删除数据
if(sign){
this.selectData.splice(i,1);
//删除数据之后下标-1(循环删除需要前移下标)
i--;
}
}
//返回选中的对象，提交后台的数据
return this.selectData;
}
总结
实现这个功能花了三天时间，对vue理解更深了⼀层，写个博客记录⼀下。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议