elementUI表格复选框进行数据回显

elementUI中的表格增加复选功能并进行数据回显


听闻小姐治家有方,鄙人余生愿闻其详。

首先将elementUI中的表格代码展示出来,这个样子


                
                
                
                    
                
                
                
                    
                
                
                    
                
                
                
                
                
                
                    
                

                

                
                    
                
            

要注意 el-table标签上面的这两个方法,:row-key="getRowKeys" @selection-change="handleSelectionChange" 这两个方法就是讲当前选中行的数据进行保存,当然根据后台所要数据进行过滤,

众所周知Vue中的数据绑定在data中,方法挂载在methods中,

如图:

将此方法定义到 data中会将当前行的idreturn出来,然后再methods中定义这个方法

// 复选框
handleSelectionChange(val) {
    this.multipleSelection = val; // 这是一个数组 将选中的值进行重新赋值然后将里面的id进行保存
    this.idss = [];
    for (var i = 0 , len = this.multipleSelection ; i < len.length; i++) {
        this.idss.push(len[i]['id'])
    }
},

最后附上我完整的代码

    

在最后加上我QQ,不明白的可以问我: 2489757828
我的私人博客李大玄的博客
至所有的前端开发 共勉!!!

你可能感兴趣的:(elementUI表格复选框进行数据回显)