项目开发使用的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
增加以上属性便可以轻松实现。
