需求:一个table表格带有多选功能,勾选一个就发送一次请求;在初始化查询的时候需要将之前勾选的行数需要展示出来。
根据官方文档,搭建表格:
HTML部分
<div class="table">
<div class="div">进入页面默认勾选第1、3两行</div>
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="{ row }">{{ row.date }}</template>
</el-table-column>
<el-table-column label="姓名" prop="name" width="120"></el-table-column>
</el-table>
</div>
JS部分:
export default {
data() {
return {
tableData: [],
Selection: [],
};
},
methods: {
// 选择事件
handleSelectionChange(val) {
this.sendApi(val);
this.Selection = val;
},
//请求事件
sendApi(val) {
console.log(val, `发送请求了`);
},
},
mounted() {
//resData,模拟返回数据,根据choose字段判断默认勾选的行
let resData = [
{
date: "05-03",
name: "王小虎",
choose: true,
},
{
date: "05-02",
name: "王小虎",
choose: false,
},
{
date: "05-04",
name: "王小虎",
choose: true,
},
{
date: "05-01",
name: "王小虎",
choose: false,
},
{
date: "05-08",
name: "王小虎",
choose: false,
},
{
date: "05-06",
name: "王小虎",
choose: false,
},
{
date: "05-07",
name: "王小虎",
choose: false,
},
];
this.tableData = resData;
this.$nextTick(() => {
resData.forEach((row) => {
if (row.choose) {
this.$refs.multipleTable.toggleRowSelection(row, true);
}
});
});
},
};
此时就会发现初始化渲染选中框的时候调用了两次(调用次数是根据勾选数量而定)请求事件。
虽然渲染以及点击请求事件的功能都已经实现,但是多次调用请求事件,会造成后续数据重复渲染的问题。
解决思路:通过监听选择的数组,再去调用请求事件,进而避免多次调用接口产生;
//添加对应的watch监控
watch: {
Selection(val) {
if (val.length) {
let arr = [];
val.forEach((i) => arr.push(i));
this.sendApi(arr);
}
},
},
//对在表格的勾选时间中去除调用接口方法、
methods: {
// 选择事件
handleSelectionChange(val) {
this.Selection = val;
},
sendApi(val) {
console.log(val, `发送请求了`);
},
},
这样初始化的时候就可以只发送最后一次数据了。
以上仅为个人在工作中的遇到的问题及解决思路,如有不对之处望各位大佬不吝指教。