vue2+Element表格实现跨页多选功能

一：场景

在dialog弹窗内对表格内容进行多选，且跨页选中项合并存储，支持已选中数据回显在表格

 

二：实现跨页多选过程

element组件已经给出了对应的属性设置，使用row-key + reserve-selection 两个属性即可完成跨页多选：

<Dialog ref="shopTable"> // 弹窗组件
<div slot="dialogMain"> // 弹窗组件插槽
    <el-table
        ref="tableRef"
        :data="tableList"
        border
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" />
        <el-table-column label="商城id" prop="activityId" />
        <el-table-column label="渠道id" prop="appId" />
        <el-table-column label="开始时间" prop="startTime" />
        <el-table-column label="状态">
          <template slot-scope="{ row }">
            {{ statusMap[row.status] }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        @current-change="handleCurrentChange"
      />
  </div>
  </Dialog>
  <script>
  const defaultData = {
      pageNo: 1,
      pageSize: 10
  }
  export default {
      name: 'DemoSelect',
      data() {
        return {
          statusMap: ['待开始', '进行中', '已结束', '已注销'],
          formData: {},
          tableList: [], // 数据列表
          total: 0, // 数据总量
          checkData: [ // 这是模拟曾经选中的数据，以测试回显
            { activityId: 1611239899, name: '嘿嘿嘿额1111' },
            { activityId: 1611239891, name: '嘿嘿嘿额2222' },
            { activityId: 1611239846, name: '嘿嘿嘿额3333' }
          ]
        }
  },
  methods: {
    // 多选变动
    handleSelectionChange(val) {
      console.log(val, '选中数据')
    },
    // 获取每行唯一标识
    getRowKeys(row) {
      return row.activityId
    },
    // 切换分页
    handleCurrentChange(val) {
      this.formData.pageNo = val
      this.fetchData() // 列表数据
    }
  }
  </script>

1:多选框

type="selection"

对应列的类型。如果设置了 selection 则显示多选框；如果设置了index则显示该行的索引（从1 开始计算）

2: 行数据key

:row-key="getRowKeys"

行数据的 Key。用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。注意此处很重要，用你每行数据的唯一值，此处我用的activityId，一般数据的唯一值应该是id

3: 跨页多选

:reserve-selection="true"

仅对 type=selection 的列有效，类型为 Boolean，为 true则会在数据更新之后保留之前选中的数据（需指定 row-key）

三：数据回显

show() {
  this.formData = Object.assign({}, defaultData)
  this.fetchData() // 列表数据
  this.$refs.shopTable.show()
  // 注意：这里必须在弹窗组件已显示后，再使用nextTick来使用toggleRowSelection
  this.$nextTick(() => {
    this.checkData.forEach((row) => {
      //toggleRowSelection用来设置某行的选中状态，必须保证表格dom已经彻底加载完毕才能使用
      this.$refs.tableRef.toggleRowSelection(row)
    })
  })
},

四，常见错误

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'toggleRowSelection')"

错误原因就是未能保证表格dom彻底加载后再使用toggleRowSelection方法，当然这种一般只在弹窗内表格这种场景才会出现，上述《三：数据回显》已经处理了这种问题