iView库Table表格组件多选的踩坑记录

1,060 阅读1分钟

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>