el-table分页多选

以你之姓@ 2024-04-20 22:14 53阅读 0赞

一、平时在做后端管理的项目中经常会遇到用户在列表分页里进行多选操作的情况，一般情况下切换到第N页，前一页选中的数据就没了，解决这个问题需要用到element ui自带的两个属性row-key和reserve-selection  
![在这里插入图片描述][d3aaa069339c43ae8335123f4d906a15.png]  
![在这里插入图片描述][33911c1e351449c882e8dcd64f636704.png]

1.先在首行设置type="selection"实现复选框列，然后把 reserve-selection 属性设置为true，使数据更新后保留之前选中的数据。  
2.需要注意的是要和属性“row-key”配合使用，使用了reserve-selection 之后，该属性是必填的。将row-key设置为表格中唯一的字段名称。  
界面代码：

<el-table
              v-loading="dataListLoading" 
              :data="dataList" 
              border 
              ref="multipleTable"
              :row-key="getRowKeys"
              @selection-change="dataListSelectionChangeHandle" 
              style="width: 100%;"
          >
            <el-table-column
              type="selection"
              width="55"
              :reserve-selection="true"
            />
            ...
    </el-table>

\*\*js

getRowKeys:function(row){
        return row.id  // 指定table id
    }
    dataListSelectionChangeHandle: function(val) {
        vm.selectList = val
        return vm.selectList;
    }

二、实现效果  
![在这里插入图片描述][c18185eddeab4b6eafebe7852934216b.png]  
![在这里插入图片描述][da85a38fb266414c93880f64b99ccdf3.png]

跨页选中，回退前一页，数据不会丢失  
三、最后一步  
\*\*操作完以后记得清空一下，不然选中数据会一直叠加，影响后续操作

vm.$refs.multipleTable.clearSelection()

[d3aaa069339c43ae8335123f4d906a15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/6465df6e61cb4eeeb714a99ab2f3e47f.png
[33911c1e351449c882e8dcd64f636704.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5bcd5ba8cd9d4ca19986e9f9f989da19.png
[c18185eddeab4b6eafebe7852934216b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/0173beab7f6c4c618a7a1738d606ab9a.png
[da85a38fb266414c93880f64b99ccdf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/a5cd3ab0e6d34e8aaa66d8594e1ae23f.png