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()
	},
}

二：将表格的selection多选变成radio单选的实现方式

{
    type: 'radio',
    align: 'center',
    width: 80,
    render: (h, params) => {
        return h('div', [
            h('Radio', {
                props: {
                    value: params.row.radio,
                },
                on: {
                    'on-change': (e) => {
                        this.tableList.forEach((items) => {
                            this.$set(items, 'radio', false)
                        })
                        this.tableList[params.index].radio = e
                    },
                },
            }),
        ])
    },
},