解决el-table切换分页的时候选项被清空

  • 用到的属性和方法说明

  • 要点:
  1.  给每行赋一个id做标识
  2. type="selection"的那一行添加一个 reserve-selection 属性,保留之前选中的数据
  3. 添加 @selection-change="handleSelectionChange" 这一个方法,把之前选中的数据存在一个数组中
<template>
 <div>
    <el-table 
      @selection-change="handleSelectionChange" 
      row-key="id"
      :data="list"
    >
        <el-table-column label=" " :reserve-selection="true" type="selection"></el-table-column>
      ......
    </el-table>
 </div>
</template>
<script>
export default {
    data() {
        list: [
            {id: 1, name: '001'},
            {id: 2, name: '002'}
        ],
        objList: []
    },
    methods:{
       handleSelectionChange(val) {
        this.objList = val;
       }
    }
}
</script>

 

在Vue.js的Element UI库中的el-table组件中,如果你需要实现多选功能并且进行了分页操作,同时希望保持用户在前一页面的选择状态,你需要维护一些额外的状态来跟踪已选择的数据。 1. **数据管理**: 当用户切换到下一页时,你需要将当前页的所有选中的项ID存储起来,比如在一个数组`selectedIds`中。 ```javascript data() { return { selectedIds: [], // 其他分页数据 }; }, ``` 2. **复选操作**: 每当用户在表格中点击某一行进行多选时,更新`selectedIds`并同步更新表单或其它处理已选择项的地方。 3. **分页回调**: 当分页改变时,确保携带已选中的数据一起加载新页: ```javascript methods: { handlePaginationChange(currentPage) { this.$axios.get('your-api', { params: { page: currentPage } }) .then(response => { // 更新表格数据 this.tableData = response.data; // 如果有上一页的选中项,添加到新数据的每一行对应的id上 if (this.selectedIds.length > 0) { this.tableData.forEach(row => { if (this.selectedIds.includes(row.id)) { row.checked = true; } }); } }) .catch(error => console.error(error)); }, } ``` 4. **重置选择**: 当用户想要清空所有选择时,可以清除`selectedIds`数组,这将自动清除所有行的`checked`状态。 注意,这种方法依赖于服务器返回的数据结构能够支持你添加自定义的标识信息,如`row.id`。如果API返回的是无状态的数据,那么需要在前端对每一项进行标记,这就比较复杂了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值