vue + element 表格多选框回显

项目开发使用的elemnetUI的table组件，牵扯到一个多选框的回显机制，这里记录一下。

那么想要实现table的多选框回显，前提得有多选框，而实现回显也主要有依赖多选框自带的几个事件，当表格存在多选框时这几个事件便可以生效：

<el-table
          row-key="id"
          :data="tableData"
          v-loading.body="tableLoading"
          :header-cell-style="headerClass"
          :max-height="tableHeight"
          :height="tableHeight"
          tooltip-effect="light"
          element-loading-text="加载中"
          style="width: 100%" ref="myTable"
          @selection-change="mySelectionChange"
          stripe label-class-name="el-table-th">
          <el-table-column type="selection" :reserve-selection="true" width="40"></el-table-column>
          <el-table-column label="序号" min-width="10" type="index" align="center">
            <template slot-scope="scope">
              {{(tablePage.pageNum - 1)*tablePage.pageSize + scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column label="书名" min-width="80" prop="type" align="center">
            <template slot-scope="scope">
              {{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label="书籍类型" min-width="80" prop="type" align="center">
            <template slot-scope="scope">
              {{scope.row.typeName}}
            </template>
          </el-table-column>
          <el-table-column label="书籍状态" min-width="70" prop="status" align="center">
            <template slot-scope="scope">
              {{scope.rowstatus=='1'?'开放':'关闭'}}
            </template>
          </el-table-column>

        </el-table>

都是elementUI自带的事件，详细了解可以去看官网，

elementUI table的多选框是双向切换状态，即点击勾选，再点击取消勾选，所以要实现回显功能，首先应该判断多选框当前的状态，默认的select事件会携带两个参数，selection即当前勾选的所有数据的集合（数组），row即当前行的数据，重要代码如下：

//更改选择的书籍信息
      mySelectionChange(val,index) {
        this.mySelect=val;
      },

回显操作（让某一行回显）

   this.$refs.trainingMaterialTable.toggleRowSelection(row, true) // 回显

清除整个表格的回显

  this.$refs.myTable.clearSelection();  //清除回显