业务需求:
(1)点击全选,显示选中全部和选中本页两项配置,默认选中全部数据
(2)已选中的数据 下拉展示
实现逻辑:
(1)el-table的SelectAll事件回调判断是否全选,是的话显示多选配置,否就隐藏配置。
我这里是全选的话,需要调用列表不分页接口:getBatchMarkingData() 获取全部数据。且将按钮类值设置为设置全部:checkType.value = 'all'
(2)切换按钮配置:
选中全部:和上面逻辑一样,调用同样方法就行。
选中本页:当前页的列表数据全部勾选且赋值给选中数据。
(3)选中或取消table中某一条数据:select方法回调可以拿到已选中的数据和操作的当前行数据。根据操作的这一行数据是否在已选中的数据中来判断是取消还是选中。
选中:向选中数组中添加该条数据。
取消:从选中数据中删除该条数据。
如果全部勾选取消:则隐藏多选配置。判断逻辑:分页接口的total总条数===选中数组.length
如果勾选完本页数据,判断当前table则将按钮状态设置为选中本页。判断逻辑:table的每一条数据都在选中数组里面。
每操作一次数据:都要判断是否还有选中的数据。没有则隐藏多选配置。有就显示。
(4)如果在选中数组中点击取消,删除当前所选项且取消勾选
(5)全部取消:
OK~