1.实现效果

2.实现原理
1.引入iview组件库,使用iview的Table组件+Page组件。
2.在columns列加入type: “selection”,设置Table的选择事件。@on-select-all,@on-select-all-cancel,@on-select,@on-select-cancel。
3.假设有禁用项,为禁用项设置_disabled为true,当进行全选或全部选时,只针对_disabled为false的数据。
4.data中设置checkedList:[],表示选择的数据的合集,这里以数据的id为例。
5.当选中其中一项的时候,先判断checkedList是否含有改数据,用includes来判断,当无数据的时候,push进checkedList,反之不进行操作。
6.当取消选中的时候,用indexOf去checkedList查找相应的索引,如果返回的索引不为-1,则用splice删除数据。
7.重点!! 当点击上一下,下一页的时,调用获取表格数据的接口,在这个接口中调用selecte

该文章详细介绍了如何利用iviewUI库的Table组件和Page组件,结合选择事件和数据处理方法,实现带有禁用项的分页多选表格。在表格中,作者通过设置_table的checked属性和管理checkedList来跟踪选中项,并在页面切换和刷新时保持选择状态。此外,文章还提到了includes、indexOf和splice等数组操作方法在实现中的应用。
最低0.47元/天 解锁文章
1万+

被折叠的 条评论
为什么被折叠?



