表格多选并根据每行值初始化选中状态（el-table-column type=“selection“）

需求描述：首先需求表格遍历显示数据，每行前需要一个复选框；要求二是根据每个对象的某个属性值判断是否默认被选中，如下图，是可关联商品的默认被选中

表格前面加复选按钮可以直接参考el官方组件

第一步： 在 el-table 中加ref 属性，它在vue中相当于是id的存在。 ref=“multipleTable”,下面写 js 用的

<!--vue-->
<el-table
        :data="tableData"
        ref="multipleTable"
        v-loading="loading"
        @selection-change="selectionChange"
        style="width: 100%;margin-top:60px"
        :header-cell-style="{ background: '#F0F2F5', color: '#000000' }"
>
        <el-table-column type="selection" width="25px"></el-table-column>
        ………………
</el-table>

toggleRowSelection 是官方方法：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；参数：row, selected
如下，先遍历每行数据对其该属性值做判断，然后更新选中状态

//可关联状态的商品默认全选
//created()
    this.$nextTick(() => {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].isRerationItem.status == 1) {
          this.$refs.multipleTable.toggleRowSelection(this.tableData[i])
        }
      }
    })

//methods
//  勾选发生变化
    selectionChange(val) {
      console.log(val)
      this.multipleSelection = val
      this.selectionIds = this.multipleSelection.map(function(item) {
        return item['itemId']
      })
      console.log('选中的商品id数组：' + this.selectionIds)
    },

官方文档：Element表格
参考文章：el-table type=“selection” 默认选中