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  是可选择的全部数据

一共三个表，一个可选择的全部信息表，一个用户表，一个用户选择信息关系表