el-table回显多选数据,toggleRowSelection失效

  nextTick(() => {
          rows.forEach(_row => {
            let mid = state.tableData.find(row => row.id === _row.id)
            unitTableRef.value.toggleRowSelection(mid ? mid : _row, selected) //必须指针一致。分页数据保持原值渲染
          })
        })

开启分页多选时,pageChange时调用;

Vue.jsElement UI库中的`el-table`组件中,分页、以及数据回显通常是结合在一起处理的高级功能。这里是一个简要说明: 1. **分页**:通过`el-pagination`组件配合`el-table`,可以实现数据的分页示,用户可以在每一页查看部分数据,通常通过设置`page-size`属性控制每页少条记录。 2. ****:在`el-table`的列头添加`type="selection"`属性,可以让每一行成为可择状态,用户可以数据。这会触发`@select`或`@row-click`事件,用于获取所数据。 3. **数据回显**:如果需要在页面加载时示之前保存的状态,比如状态,可以先从服务器或本地存储(如Vuex或localStorage)获取已择的数据,然后在`row-key`指定的字段上绑定这个状态,这样表格会根据回显数据更新其展示。 例如,你可以这样做: ```html <template> <el-pagination :total="total" @current-change="handleCurrentChange"></el-pagination> <el-table :data="tableData" row-key="id" border v-model="selectedRows" @select="handleSelectionChange" > <!-- ...表头... --> <el-table-column type="selection" label="操作"> <!-- 处理复框操作... --> </el-table-column> </el-table> </template> <script> export default { data() { return { total: 0, tableData: [], selectedRows: [], // 用于保存选中的行ID }; }, methods: { handleCurrentChange(page) { this.tableData = this.tableData.slice((page - 1) * this.perPage, page * this.perPage); }, handleSelectionChange(rows) { this.selectedRows = rows.map(row => row.id); // 更新当前选中的行ID }, // 其他方法... }, computed: { perPage: { get: () => this.$store.state.pageSize, // 如果是从Vuex获取分页大小 set(value) { this.$store.commit('setPageSize', value); } }, }, // 获取数据并初始化回显部分 async created() { const initialSelectedIds = await this.fetchInitialSelection(); // 假设这是一个获取初始择的函数 if (initialSelectedIds.length > 0) { this.selectedRows = initialSelectedIds; } }, }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值