iView的Table表格组件的多选,on-select-all全选事件是只有选中才会触发,取消全选不会触发此函数,而on-selection-change事件在给data赋值的时候也会清空,所以不能实现切换页面时保留上个页面已选的列表。
所以得:
<template>
<div>
<Table border :columns="columns" :data="data"
@on-selection-change="delAllSelection" @on-select-all="allSelection" @on-select-cancel="cancelSelection"
@on-select="getSelection"></Table>
</div>
</template>
<script>
export default {
data () {
return {
selectActionList:[],
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: 'Name',
key: 'name'
},
],
data: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
]
}
},
methods: {
// 单选
getSelection(arr, row) {
console.log(arr);
if (row) {
this.selectActionList.push(row)
}
},
// 全选中
allSelection(arr) {
let temp = [...arr, ...this.selectActionList];
let obj = {};
temp = temp.reduce(function (item, next) {
obj[next.userCode] ? '' : obj[next.userCode] = true && item.push(next);
return item;
}, []);
this.selectActionList = temp;
},
// 全选删除
delAllSelection(arr) {
let temp = [...this.selectActionList];
if (arr.length === 0) {
const listA = this.data
for (let i in temp) {
for (let j in listA) {
if (temp[i] && temp[i].userCode === listA[j].userCode) {
delete temp[i]
}
}
}
this.selectActionList = temp.filter(d => d);
}
},
// 单击取消
cancelSelection(arr, val) {
console.log(val);
const temp = this.selectActionList;
temp.forEach((item, index) => {
if (item.userCode === val.userCode) {
temp.splice(index, 1)
}
})
this.selectActionList = temp;
},
}
}
</script>