表格展示数据,点击编辑的时候出来多选表格的弹窗,
```html
<div style="width: 40%; height: 300px; margin-right: 100px">
<el-button type="primary" @click="addDynamic(module.classifyID)" :key=""
>编辑
<el-dialog title="请选择" :visible.sync="addDynamicVisible" >
<el-table
:row-key="getRowKeys"
ref="multipleTable"
:data="titleListA"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" :reserve-selection="true" width="55"> el-table-column>
<el-table-column prop="newsTitle" label="动态" :reserve-selection="true"> el-table-column>
el-table>
<el-button @click="add(item1, item2)">保存el-button>
el-dialog>
<el-table :data="homeDynamicList" stripe border height="200px">
<el-table-column label="官网首页-动态" prop="newsTitle">
el-table-column>
<el-table-
<el-table-column align="center" label="操作" width="200px">
<template slot-scope="scope">
<el-button
icon="el-icon-top"
circle
type="primary"
@click="moveUp(scope.$index, scope.row)"
>el-button>
<el-button
icon="el-icon-bottom"
circle
type="primary"
@click="moveDown(scope.$index, scope.row)"
>el-button>
<el-button
icon="el-icon-close"
circle
type="danger"
@click="deleteById(scope.row)"
>el-button>
template>
el-table-column>
el-table>
div>
async addDynamic(item) {
console.log(item);
this.addDynamicVisible = true;
this.getNewsTitleByClassifyId();
let res = await getNewsTitle(item);
this.titleListA = res.data;
// this.arr.forEach((rows)=>{
// this.titleList.forEach((value)=>{
// if(rows.id===value.id){
// this.$refs.multipleTable.toggleRowSelection(rows,true)
// }
// })
// })
},
之前是在编辑方法里试图写数据回显,没生效。是写在dialog的openend事件里面,还是直接写编辑方法里面呢。两种都试了,都没生效。
如果你的数据绑定没有问题,那么大概率是因为元素还没有渲染好,你就开始设置勾选引起的。
可以尝试在设置勾选的时候加一个 nextTick 试一试,例如
async addDynamic(item) {
console.log(item);
this.addDynamicVisible = true;
this.getNewsTitleByClassifyId();
let res = await getNewsTitle(item);
this.titleListA = res.data;
this.$nextTick(() => {
this.arr.forEach(rows => {
this.titleList.forEach(value => {
if (rows.id === value.id) {
this.$refs.multipleTable.toggleRowSelection(rows, true);
}
});
});
});
}