Bootstrap

iview实现表格的全选、反选、清空、统计、单选等功能

一:实现表格的全选、反选、清空,并统计当前选中的条数

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
;