解决elementUI中table多选分页后选中回显、勾选分页后不保存问题

一、问题一：Table勾选分页后不保存
解决： Table 添加row-key作唯一标识
代码：

   <el-table
        :data="packageItems"
        :header-cell-style="{ background: '#F6F6F6' }"
        :height="500"
        stripe
        border
        highlight-current-row
        @selection-change="handleSelectChange"
        :row-key="getRowKeys"
        :reserve-selection="true"
        ref="multipleTableClinicRoom"
      >
      // 解决Table 切换页面 原先选择状态消失
       getRowKeys(row) {
         // id 是后台传递的每行信息唯一标识
         return row.id
     },

二、问题二：已勾选项回显
解决：

     // 回显数据
    echoData() {
      if (this.product_package.length > 0) {
        let hasSelectList = []
        this.packageItems.forEach((i, index) => {
          this.product_package.forEach((j) => {
            if (i.id == j.id) {
              hasSelectList.push(index)
              return (i.goodsNumber = j.use_num)
            }
          })
        })
        this.$emit('selectChange', this.hasSelectList)
        hasSelectList.forEach((i) => {
          this.$nextTick(() => {
            //关键代码 按照你的数据结构 循环Table 让需要勾选项作如下操作
            this.$refs.multipleTableClinicRoom.toggleRowSelection(this.packageItems[i], true)
          })
        })
      }
    },

三、问题三：分页已勾选的回显
解决：由于我的Table data 数据时分页后调接口回去的所以每次数据会发生变化
代码：

 watch: {
    //监听表格数据、使用this.$nextTick函数 保证数据和页面渲染同步！
    packageItems(n, o) {
      this.$nextTick(() => {
        this.echoData()
      })
    },
  },