因为项目需要出现了这么一个问题,场景是这样,点击按钮弹出 一个 多选 table 数据列表页面,选中商品点击确定需要默认选中,但是每次点击都会重新加载数据导致把之前的默认选中会覆盖掉,以下是这次问题的一个解决办法,如果有更好的建议欢迎留言
//页面弹窗多选 table 页面
<el-dialog @open="getGoods" title="选择商品" :visible.sync="goodsDialog.visible" :close-on-click-modal="false" center>
<el-form size="small" :inline="true" :model="search" @submit.native.prevent>
<el-form-item>
<div class="input-item">
<el-input @clear="toSearch" clearable @keyup.enter.native="toSearch" size="small" placeholder="请输入商品ID/名称搜索" v-model="search.keyword">
<el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
</el-input>
</div>
</el-form-item>
</el-form>
<el-table :data="goodsDialog.list" v-loading="goodsDialog.loading" @selection-change="goodsSelectionChange">
<el-table-column label="选择" type="selection"></el-table-column>
<el-table-column label="ID" prop="id" width="100px"></el-table-column>
<el-table-column label="名称" prop="name"></el-table-column>
</el-table>
<div style="text-align: center; margin-top: 15px;">
<el-pagination v-if="goodsDialog.pagination" style="display: inline-block" background @current-change="goodsDialogPageChange" layout="prev, pager, next, jumper" :page-size.sync="goodsDialog.pagination.pageSize" :total="goodsDialog.pagination.totalCount">
</el-pagination>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="goodsDialog.visible = false" size="small">取 消</el-button>
<el-button type="primary" @click="addGoods" size="small">确 定</el-button>
</div>
</el-dialog>
//js 实现
methods: {
showGoodsDialog(index) {
this.goodsDialog.visible = true;
this.goodsDialog.index = index;
},
goodsSelectionChange(val) {
this.goodsDialog.selected = val;
},
getGoods() {
let self = this;
self.goodsDialog.loading = true;
request({
params: {
r: 'xxx/zzz/ccc',
},
method: 'get',
}).then(e => {
self.goodsDialog.loading = false;
self.goodsDialog.list = e.data.data.list;
}).catch(e => {
console.log(e);
});
},
//这里是重点
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
//关键代码 tips:网上给出的解释是:需要使用tableData 原有的数据,不可以使用传入的参数所以一直选不中
this.nextTick(()=>{
this.$refs.multipleTable.toggleRowSelection(this.goodsDialog.list.find(item=>{
return row.id === item.id;
}),true);
})
});
}
},
}