el-table多选checkbox实现可多页多选,翻页后勾选情况不清空

需求:表格数据分多页,里面的多选框生效时是只在当前页生效,用户可能需要选择多页数据,这样就需要在数据翻页后之前以选中的要保留并且在新的一页上选中的要加上。
实现:
多选的实现在element的组件里有现成的,这个是在此基础上实现的。
在表格<el-table>里加入:row-key="(row)=>{ return row.id}"

<el-table
	:row-key="(row)=>{ return row.id}"
    ref="multipleTable"
    :data="tableData"   
    @selection-change="handleSelectionChange">

<el-table-column>里加入:reserve-selection="true"

<el-table-column :reserve-selection="true" label="员工基本信息">

完成思密达~

`el-checkbox-group` 是 Element UI 中的一个组件,用于实现复选框组的功能。如果发现点击一个项却导致所有项都被中,可能是由于以下几个原因: ### 常见原因及解决办法 1. **绑定的数据格式错误** `el-checkbox-group` 的 `v-model` 绑定值需要是一个数组类型。如果你绑定的是单个变量(如字符串、数字等),那么当某个复选框中时,整个数据会被覆盖为当前择项的内容,进而触发“全”的现象。 - 错误示例: ```vue <el-checkbox-group v-model="selected"> <el-checkbox label="Option 1"></el-checkbox> <el-checkbox label="Option 2"></el-checkbox> </el-checkbox-group> data() { return { selected: "Option 1" // 这里应该是数组 [] }; } ``` - 正确做法: ```vue <el-checkbox-group v-model="selectedOptions"> <el-checkbox label="Option 1"></el-checkbox> <el-checkbox label="Option 2"></el-checkbox> </el-checkbox-group> data() { return { selectedOptions: [] // 确保是数组 }; } ``` 2. **标签属性重复或冲突** 如果复选框的 `label` 属性设置为相同的值,则可能会导致它们被视为同一个项而同步变化。 - 示例: ```vue <!-- 下面两个 checkbox 都有相同的 label --> <el-checkbox-group v-model="selected"> <el-checkbox label="SameLabel"></el-checkbox> <el-checkbox label="SameLabel"></el-checkbox> </el-checkbox-group> ``` 解决方案:确保每个复选框的 `label` 属性都是唯一的。 3. **事件监听异常** 某些情况下自定义的逻辑可能导致意外结果。例如,在修改 `v-model` 数据时手动清空或赋值全部内容,会间接影响到其他项的状态。 4. **初始化状态问题** 若初始加载页面时未正确配置默认值,也可能引发类似的问题。比如将 `v-model` 设置成非预期范围内的数值。 --- ### 总结 检查是否按照官方文档规范设置了正确的模型绑定以及各项参数非常重要,并且保证基础 HTML 结构完整无错漏即可避免上述情况发生。 ####
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值