elementui plus实现本页全选和跨页全选

本文详细描述了如何在el-table组件中实现点击全选、选中本页、单行操作的选中/取消功能,以及根据业务需求调整多选配置和处理全部取消的情况。涉及到了el-table的SelectAll事件回调、数据获取和状态管理逻辑。
摘要由CSDN通过智能技术生成

业务需求:

(1)点击全选,显示选中全部和选中本页两项配置,默认选中全部数据

(2)已选中的数据 下拉展示

实现逻辑:

(1)el-table的SelectAll事件回调判断是否全选,是的话显示多选配置,否就隐藏配置。

我这里是全选的话,需要调用列表不分页接口:getBatchMarkingData() 获取全部数据。且将按钮类值设置为设置全部:checkType.value = 'all'

(2)切换按钮配置:

选中全部:和上面逻辑一样,调用同样方法就行。

选中本页:当前页的列表数据全部勾选且赋值给选中数据。

(3)选中或取消table中某一条数据:select方法回调可以拿到已选中的数据和操作的当前行数据。根据操作的这一行数据是否在已选中的数据中来判断是取消还是选中。

选中:向选中数组中添加该条数据。

取消:从选中数据中删除该条数据。

如果全部勾选取消:则隐藏多选配置。判断逻辑:分页接口的total总条数===选中数组.length

如果勾选完本页数据,判断当前table则将按钮状态设置为选中本页。判断逻辑:table的每一条数据都在选中数组里面。

每操作一次数据:都要判断是否还有选中的数据。没有则隐藏多选配置。有就显示。

(4)如果在选中数组中点击取消,删除当前所选项且取消勾选

(5)全部取消:

OK~

可以通过以下步骤实现单选和全选: 1. 定义一个变量selected来存储选中的项,可以初始化为空数组。 2. 在列表中的每个项上绑定一个点击事件,当点击时将该项的值添加到selected中,如果该项已经被选中,则将其从selected中删除。 3. 定义一个全选的复选框,绑定一个change事件。当该复选框被选中时,将列表中所有项的值添加到selected中;当该复选框被取消选中时,将selected清空。 4. 在列表中的每个项前面添加一个复选框,绑定一个change事件。当该复选框被选中时,将该项的值添加到selected中;当该复选框被取消选中时,将其从selected中删除。 5. 在页面中展示selected的内容。 具体实现代码如下: ```html <template> <div> <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox> <el-checkbox-group v-model="selected"> <div v-for="(item, index) in list" :key="index"> <el-checkbox :label="item.value" @change="handleSelectItem(item.value)">{{ item.label }}</el-checkbox> </div> </el-checkbox-group> <p>已选中的项:{{ selected.join(', ') }}</p> </div> </template> <script> export default { data() { return { list: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ], selected: [], selectAll: false } }, methods: { handleSelectAll() { if (this.selectAll) { this.selected = this.list.map(item => item.value) } else { this.selected = [] } }, handleSelectItem(value) { const index = this.selected.indexOf(value) if (index > -1) { this.selected.splice(index, 1) } else { this.selected.push(value) } this.selectAll = this.selected.length === this.list.length } } } </script> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值