element 表格(多选) 初始化多次调用其他方法问题

需求：一个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, `发送请求了`);
    },
  },

这样初始化的时候就可以只发送最后一次数据了。

以上仅为个人在工作中的遇到的问题及解决思路，如有不对之处望各位大佬不吝指教。