Vue 通过id回显el-table表格对应行选中

实现效果

代码实现——HTML部分

用elementUi的组件el-table，设置type的属性为selection

<el-table
          :data="tableData"
          style="width: 100%"
          max-height="600"
          ref="tableRef"
          :header-cell-style="{ background: '#fff', color: '#606266' }"
          :cell-style="{ color: '#333' }"
          border
          @selection-change="handleSelectChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop label="序号" width="80" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备名称" prop="deviceName" align="center"></el-table-column>
          <el-table-column label="设备所属产品" prop="productName" align="center"></el-table-column>
          <el-table-column label="备注" prop="remark" align="center"></el-table-column>
        </el-table>

代码实现——JS部分

首先拿到表格中的默认数据——判断后端给的默认接口返回的数据id与表格中的数据id是否一致
通过调用toggleRowSelection方法，实现选中
this.refs.tableRef.toggleRowSelection(表格默认的数据，true)

               this.$http({
                    url: ' ', //后端提供的接口
                    method: 'get'
                }).then(({data}) => {
                    let arr= []
                    this.tableData.forEach((item) => {
                        data.data.forEach(val => {  //遍历接口返回的id数组
                            if (val.id=== item.id) {
                                list.push(item)
                            }
                       })
                    })
                    if (arr) {
                        list.forEach((row) => {
                          this.$refs.tableRef.toggleRowSelection(row, true)
                        })
                    }
                })

提示: 主要是要知道表格中的哪一行需要被默认选中，再将数据放入方法中即可

方法:

1. 创建一个空数组，用来存放默认数据 (默认数据可能不止一个，用数组存放)
2. 遍历表格的数据，再遍历后端给的接口数据，两者id一致（不一定是要id，两者之间共同的标识即可，一般以id做判断）
3. 把判断出来的默认表格数据push到创建的数组中
4. 再遍历数组，将数据放入方法中