一:实现表格的全选、反选、清空,并统计当前选中的条数
1.表格主要通过on-selection-change实现,当选中项发生变化时,就会触发该方法。
2.给 data 项设置特殊 key _checked: true 可以默认选中当前项。
html:
// 按钮
<span @click='handleSelectAll(true)'>全选</span>
<span @click='invertSelect'>反选</span>
<span @click='handleSelectAll(false)'>清空</span>
// 选中的条数
<p>已选中{
{ selection.length }}个选项</p>
// 表格
<Table
stripe
border
:columns='columns'
:data='tableList'
ref='table'
@on-selection-change='changeSelection'
:key='refresh'
>
></table>
js:
data(){
return {
// 表格被选择的行
selection: {
length: 0, // 选中的总条数
ids: [], // 所有被选择行的id
},
}
},
methods:{
// 勾选项发生改变
chang

本文介绍了如何利用iview实现表格的全选、反选、清空操作,并详细讲解了如何统计当前选中的条数。同时,还讨论了如何将表格的多选模式转换为单选模式,提供了相关的HTML和JavaScript代码示例。
最低0.47元/天 解锁文章
588

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



