解决element表格跨页面多选的另一种方案

最新推荐文章于 2025-03-17 10:50:01 发布

Er ist träumer.

最新推荐文章于 2025-03-17 10:50:01 发布

阅读量281

点赞数

分类专栏：那些年我们遇到的坑 vue学习文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/Kobeloveu/article/details/121270133

版权

那些年我们遇到的坑同时被 2 个专栏收录

12 篇文章

订阅专栏

vue学习

2 篇文章

订阅专栏

本文介绍如何在Vue.js应用中，不依赖element-ui的reserve-selection特性，手动实现跨分页表格的多选功能。通过监听表格的selection-change事件，维护一个全局的选中数据列表，并在数据回显时重新设置选中状态。关键方法包括handleSelectionChange和handleEchoSelected，分别处理选中变化和回显数据的勾选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在不使用 element 内部提供的reserve-selection属性的情况下，实现跨分页多选
模板代码代码如下：

<div class="table">
     <j-table ref="multipleTable" :data="tableData" :row-key="row=>row.id"  @selection-change="handleSelectionChange" >
        <j-table-column type="selection" width="55"></j-table-column>
        <j-table-column prop="realWarehouseCode" label="仓库编码" > </j-table-column>
         <j-table-column prop="realWarehouseName" label="仓库名称"> </j-table-column>
        <j-table-column prop="provinceName" label="所在城市" > </j-table-column>
        <j-table-column label="销售组织">
          <template slot-scope="scope">{{findLabelByVal(LegalPersonList,scope.row.inventoryOrgCode,'string')}}</template>
        </j-table-column>
     </j-table>
    </div>

接收父组件回显数据，及选中处理

 props: {
    selectedData: {
      type: Array,
      default: null
    }
  },
 data(){
 return {
 	tableData: [],
    selectedTableData: [],
 }
 },

methods：{
     //选中回调
      handleSelectionChange (selection) {
      // 当选中数组为空的时候
      if (this.selectedTableData.length === 0) {
        this.selectedTableData = selection
        return
      }
      // 所有选中选项
      const allItems = _.cloneDeep(this.selectedTableData)
      // 当前页面数据 id集合
      const currentTableData = _.cloneDeep(this.tableData).map(i => i.id)
      // 非当前页选中数据
      const noCurrentPageSelect = allItems.filter(i => !currentTableData.includes(i.id))
      // 因为selection 仅返回当前页的所有选中数据，我们更新当前页选中数据就可以了
      this.selectedTableData = [...noCurrentPageSelect, ...selection]
    },
    // 勾选
    handleEchoSelected (currentList, allList) {
      const allListIds = allList.map(i => i.id)
      currentList.forEach(i => {
        // 回显当前页的数据勾选
        if (allListIds.includes(i.id)) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(i, true)
          })
        }
      })
    },
}