[JavaScript知识库]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:{
	// 勾选项发生改变
	changeSelection (selection) {
	    this.selection.length = selection.length
	    this.selection.ids = selection.map(item => item.id)
	
	    this.tableList.forEach(item => {
	    	// 判断当前行的id是否被选中
	        item._checked = this.selection.ids.includes(item.id)
	    })
	},
	// 全选/清空
	handleSelectAll (status) {
	    this.$refs.table.selectAll(status)
	},
	// 反选
	invertSelect () {
	    this.tableList.forEach(item => {
	        item._checked = !item._checked
	    })
	    this.selection.length = this.tableList.filter(item => item._checked).length
	    this.refresh = new Date().getTime()
	},
}