项目开发使用的elemnetUI的table组件，牵扯到一个多选框的回显机制，这里记录一下。(最新方法在最下面)

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

<el-table ref="multipleTable" 
          :data="carData" 
          :empty-text="emptytext"
          :header-cell-style="{ 'background-color': '#5F7ABF', 'color': '#fff','border': 'none' }"
          :row-key="getRowKeys"
          style="margin-top: 10px;width:100%" stripe border 
          // 主要事件就是如下几个
          @selection-change="handleChange"
          @select-all="handleSelectAll"
          @select="handleSelect">
              <el-table-column type="selection" :reserve-selection="true" width="40"></el-table-column>
              <el-table-column
                label="车牌号"
                align="center"
                prop="vehicleNo"
                min-width="150px">
              </el-table-column>
              <el-table-column
                  prop="activeStatus"
                  align="center"
                  label="状态"
                  min-width="120px">
                <template slot-scope="scope">
                  <span v-if="scope.row.activeStatus === '在线'" style="color:#13CE66">{{ scope.row.activeStatus }}</span>
                  <span v-else>{{ scope.row.activeStatus }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="platformName"
                align="center"
                label="运营商平台"
                min-width="150px"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="owersName"
                align="center"
                label="企业/业户"
                min-width="150px"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>

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

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

handleSelect(val, row) {
        if (this.firstIN === 1) { // 设置第一次进来才回触发事件
          /* 1 => add ; 0 => remove*/
          let flag = 0
          for (const i in val) {
            if (row.id === val[i].id) {
              flag = 1
              break
            }
          }
          if (flag === 1) {
            // 如果判断当前为添加则将当前勾选数据push到指定数组中
            this.superviseDate.push(row)
          } else {
            // 否则从数组中删除当前行数据
            for (const i in this.superviseDate) {
              if (this.superviseDate[i].id === row.id) { this.superviseDate.splice(i, 1) }
            }
          }
        }
      },

// select-all事件会勾选或者取消勾选当前页面的所有数据
handleSelectAll(val) {
        if (this.firstIN === 1) { // 意思第一次点击不会执行hangleSelectAll里面的方法
          var v = this
          // remove
          if (val.length === 0) {
            for (const i in v.carData) {
              for (const j in v.superviseDate) {
                if (v.superviseDate[j].id === v.carData[i].id) {
                  v.superviseDate.splice(j, 1)
                  break
                }
              }
            }
          }
          if (v.superviseDate.length === 0) {
            for (const i in val) {
              v.superviseDate.push(val[i])
            }
          } else {
            for (const i in val) {
              let flag = false
              for (const j in v.superviseDate) {
                if (v.superviseDate[j].id === val[i].id) {
                  flag = true
                  break
                }
              }
              if (!flag) { v.superviseDate.push(val[i]) }
            }
          }
        }
      },

// selection-change事件
handleChange(val) {
    if (this.firstIN === 0) {
      this.superviseDate = val
    }
  }

上述多选框的这三个事件结合方能准确提炼出当前表格勾选的数据

回显是在表格数据请求里面完成的，即在获取表格数据时，将之前获取的表格勾选的数据进行回显，每一次把当前页请求的数据和表格勾选数据做对比，如果相等则回显。

// 每一次执行数据请求的方法时，在请求成功的方法里执行回显
// 在外层定义一个用来保存回显数据的数组checkedrow
            res.data.rows.forEach(item => {
                this.superviseDate.forEach(val => {
                  if (val.vehicleNo=== item.vehicleNo) {
                    checkedrow.push(item)
                  }
                })
              })
              this.$nextTick(() => {
                checkedrow.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row, true) // 回显
                })
              })

上述就是基本的table数据回显，但是因为业务需要，这个项目回显的是从input v-model绑定的值，因为在选择车辆时，点击确定，勾选数据就是赋值给input 绑定的值，这样的写法也可以避免很多bug，比如，如果用户删除input的值（input里面有一个x的清楚按钮），这是再打开车辆选择弹框，那么table数据是不需要回显的。代码如下：

if (this.superviseDate || this.vehicleNo) {
            if (this.vehicleNo || this.selectNo) { // 数据回显
              const checkedrow = []
              let cidarr = []
              let no = ''
              if (this.vehicleNo) {
                this.clickCheckArr = this.vehicleNo.split(',')
              }
              if (this.clickCheckArr.length > 0) no = this.clickCheckArr.join()
              if (no.indexOf(',') !== -1) {
                cidarr = no.split(',')
              } else {
                cidarr.push(no)
              }
              res.data.rows.forEach(item => {
                cidarr.forEach(i => {
                  if (i === item.vehicleNo) {
                    checkedrow.push(item)
                  }
                })
              })
              this.$nextTick(() => {
                checkedrow.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row, true)
                })
              })
            } else {
              this.$refs.multipleTable.clearSelection()
            }
          }

以上方法适用于elementUI table之前的版本了，也不知道在何时饿了么已经对表格功能做了更新，以上需求利用table自带的方法便可以轻松实现：

Table-column增加属性：reserve-selection

table增加属性：row-key

增加以上属性便可以轻松实现。