复选框数据列表回显问题（el-table数据回显翻页问题）

        <el-table
          v-show="contactList.length !== 0"
          ref="multipleTable"
          :data="contactList"
          :row-key="getRowKeys"
          tooltip-effect="dark"
          height="336px"
          class="general-table"
          @selection-change="onContactSelectChange"
        >
          <el-table-column type="selection" :reserve-selection="true" />
          <el-table-column label="姓名" prop="name" width="80" />
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip align="center" />
          <el-table-column prop="mobile" label="电话" align="center" />
          <el-table-column label="微信状态" align="center">
            <template slot-scope="scope">
              <span :class="getWechatStatus(scope.row)">
                {{ scope.row.state }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="desc" label="备注" align="center" show-overflow-tooltip />
        </el-table>
    getRowKeys(row) {
      return row.id
    },

table属性有个row-key是作为切换页面还会存在的作用

    echoTable(echoTable) {
      debugger
      this.echoDataList = []
      echoTable.map(item => {
        this.contactList.map(it => {
          if (item.key === it.id) {
            this.$refs.multipleTable.toggleRowSelection(it, true)
          }
        })
        const obj = {
          id: item.key,
          name: item.label,
          state: item.state
        }
        this.echoDataList.push(obj)
      })
    },

上面这个代码块是数据回显处理的业务逻辑

    onContactSelectChange(val) {
      this.newSelection = val
      setTimeout(() => {
        this.echoSelectChange()
      }, 20)
    },
    echoSelectChange() {
      if (this.echoDataList.length <= 0) {
        this.echoDataList = this.newSelection
        return
      }
      const selectAllIds = this.echoDataList.map(item => item.id)
      const selectIds = []
      this.newSelection.map(item => {
        selectIds.push(item.id)
        if (selectAllIds.indexOf(item.id) < 0) {
          this.echoDataList.push(item)
        }
      })
      const noSelectId = this.contactList.map(item => {
        if (selectIds.indexOf(item.id) < 0) {
          return item.id
        }
      })
      noSelectId.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < this.echoDataList.length; i++) {
            if (this.echoDataList[i].id === id) {
              // 如果总选择中有未被选中的，那么就删除这条
              this.echoDataList.splice(i, 1)
              break
            }
          }
        }
      })
    },
    selectRow() {
      if (this.echoDataList.length <= 0) return
      const selectAllIds = this.echoDataList.map(item => item.id)
      this.$refs.multipleTable.clearSelection()
      for (let i = 0; i < this.contactList.length; i++) {
        if (selectAllIds.indexOf(this.contactList[i].id) >= 0) {
          // 设置选中，记住table组件需要使用ref="table"
          this.$refs.multipleTable.toggleRowSelection(this.contactList[i], true)
        }
      }
    },

上面的代码是选择复选框的时候处理的业务逻辑

      getContactAPI((status, message, dataList, total) => {
        if (status) {
          this.contactList = dataList
          this.total = total
          // 主要做回显处理 每次便利请求要查询时候存在回显的数据
          this.$nextTick(() => {
            this.selectRow()
          })
        }
      }, this.pageIndex, this.pageSize, selectedGroupId, this.searchText)
    },

上面是接口请求数据防止覆盖处理的方法