一:实现表格的全选、反选、清空,并统计当前选中的条数
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