IView library Table Table component multi – selected tread pit record

The on-select-all event will be triggered only when the Table component is selected. Canceling the all-select event will not trigger this function. The on-select-change event will also be cleared when assigning values to data, so it cannot be implemented to keep the selected list of the last page when switching pages. So:

<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: {
            / / radio
            getSelection(arr, row) {
              console.log(arr);
              if (row) {
                this.selectActionList.push(row)
              }
            },
            / / all selected
            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);
                returnitem; } []);this.selectActionList = temp;
            },
            // Select delete all
            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); }},// Click Cancel
            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>
Copy the code