vue + element 表格多选框回显

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

那么想要实现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()
            }
          }