vue使用之el-table选择框默认选中
vue使用之el-table选择框默认选中
适用场景:主要用于修改功能,需要打开新页面,新增时选择的某几条需要勾选显示出来,方便修改。
(ps:我只是实现了,但具体为什么说不出来,记录一下是为了下次方便用。。。。)
一、默认选中的<el-table 编写
<el-table @selection-change="handleSelectionChange"
ref="multipleTable"
:row-key="getRowKeys" >
这三个是必备的
handleSelectionChange 是多选框选中数据的方法,是若依自带的
二、handleSelectionChange 方法
handleSelectionChange(selection) {
this.ids = selection.map(item => item.你要用的字段名)
this.single = selection.length!==1
this.multiple = !selection.length
},
三、getRowKeys方法
getRowKeys(row){
return row.你要用的字段名
},
四、选择框编写
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
:reserve-selection="true" 别忘了加
五、修改方法编写
async handleUpdate(row) {
await get(row.主表主键).then(response => {
this.List = response.data;
for (let i=0; i<this.List.length; i++) {
this.List2[i]=(this.List[i].子表主键)
}
});
await this.selsetYiJin()
},
这里要解释几点:
1.async await 异步处理(具体自行百度) 总之目的是为了让程序按顺序执行,不然会出现前面方法的执行结果还没出来,下一个方法要用但数据为空导致执行失败的问题
2.逻辑说一下:
(1)先根据你选择要修改那条数据的主表主键去找到已选中的信息 this.List
(2)循环得到已选中信息this.List的子表主键,保存到 this.List2 里
六、selsetYiJin() 方法编写
selsetYiJin(){
this.$nextTick(() => {
if (this.List2 != ""){
for (let j=0;j<this.List0.length;j++){
if (this.List2.indexOf(this.List0[j].name) >= 0){
this.$refs.multipleTable.toggleRowSelection(this.List0[j]);
}
}
}
})
},
这里要解释几点:
1.最主要的句子 this.$refs.multipleTable.toggleRowSelection(this.List0[j]);
2.this.List0 是可选择的全部数据
一共三个表,一个可选择的全部信息表,一个用户表,一个用户选择信息关系表
更多推荐
所有评论(0)