vue element ui 表格带分页全选情况

vue element ui 表格带分页全选情况

1. 效果

2. 原理

我们真实的情况，选择一条或者多条，将选择的id拼接成一个id数组传给后端，但是问题，如果数据过多的话，全选加入有4-5W条数据传递起来很费力而且可能会出错。和后端商量，当全选选择全部数据时，我们前端只传递一个参数，用这个参数表示选择全部即可。但是问题来了，前端的样式需要我们来进行调整。实现要求，点击了全选之后，切换下一页，也必须是全选的。实际实现请参考具体简单代码例子，实际业务数据等还需自己增加。

<template>
  <div>
    <div>
      <el-table :data="tabledata" border style="width:100%" @selection-change="selRow" ref="multipleTable" :row-key="getRowKeys">
        <el-table-column type="selection" min-width="55" align="center" :reserve-selection="true"></el-table-column>
        <el-table-column prop="num" label="id" min-width="120" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" min-width="300" align="center"></el-table-column>
        <el-table-column prop="time" label="时间" min-width="300" align="center"></el-table-column>
      </el-table>
    </div>
    <el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="checkAll" @change="selAll()"></el-checkbox>
    <el-pagination
      @size-change="handlePageSize"
      @current-change="handleCurrentPage"
      :current-page="currentPage"
      :page-sizes="[3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-button @click="btn">打印</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1,
      pageSize: 3,
      total: 8,
      isIndeterminate: false, // 对el-checkbox控制不完整的全选状态
      checkAll: false, // 对el-checkbox控制全选状态
      tabledata: [],
      newTabledata: [
        // el-table的数据内容
        {
          id: 1,
          num: '20210001',
          name: '小明',
          time: '2021-01-10'
        },
        { id: 2, num: '20210003', name: '打发', time: '2019-10-14' },
        {
          id: 3,
          num: '20210002',
          name: '花花',
          time: '2021-01-10'
        },
        {
          id: 4,
          num: '201903123350',
          name: '的飞洒',
          time: '2019-10-16'
        },
        {
          id: 5,
          num: '201903123345',
          name: '撒打发',
          time: '2019-10-10'
        },
        { id: 6, num: '201903123346', name: '供应商推荐', time: '2019-10-14' },
        {
          id: 7,
          num: '201903123348',
          name: '企鹅窝若',
          time: '2019-10-15'
        },
        {
          id: 8,
          num: '201903123350',
          name: '很多个',
          time: '2019-10-16'
        }
      ]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    // 获取row的key值
    getRowKeys(row) {
      return row.id
    },
    handlePageSize(pageSize) {
      this.pageSize = pageSize
      this.search()
    },
    handleCurrentPage(currentPage) {
      this.currentPage = currentPage
      this.search()
    },
    search() {
      this.tabledata = this.newTabledata.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    btn() {
      console.log(this.selectedAssetsList)
      console.log(this.assetsUidList)
    },
    // 全选按键功能实现
    selAll() {
      console.log(this.$refs.multipleTable.selection.length)
      if (this.$refs.multipleTable.selection.length < this.newTabledata.length) {
        // 判断勾选的数据是否是 大于 全选的数据  ，如果 小于则 让 全选 等于 true 否则为 false
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      if (this.checkAll) {
        this.newTabledata.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
        this.selectedAssetsList = []
        this.assetsUidList = []
      }
    },
    stateChange() {
      var vm = this
      if (vm.assetsUidList.length < this.newTabledata.length && vm.assetsUidList.length > 0) {
        this.isIndeterminate = true
      } else if (vm.assetsUidList.length === this.newTabledata.length) {
        this.isIndeterminate = false
        this.checkAll = true
      } else if (vm.assetsUidList.length === 0) {
        this.isIndeterminate = false
        this.checkAll = false
      }
    },
    // 表格内checkbox触发的全选按钮状态变化
    selRow(val) {
      const vm = this
      // 选择的行的完整数据。
      vm.selectedAssetsList = Array.from(new Set([...vm.selectedAssetsList, ...val]))
      const currentArr = val.map(item => item.id)
      const arr1 = [...vm.assetsUidList, ...currentArr]
      vm.assetsUidList = Array.from(new Set(arr1))
      const tableData = vm.tabledata.map(item => item.id)
      const difference = tableData.filter(v => !currentArr.includes(v))
      difference.forEach(item => {
        if (vm.assetsUidList.indexOf(item) !== -1) {
          vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1)
        }
      })
      // 把选中的行数据进行去重。
      var list = vm.selectedAssetsList.filter(item => vm.assetsUidList.indexOf(item.id) !== -1)
      for (var i = 0; i < list.length; i++) {
        for (var j = i + 1; j < list.length; j++) {
          if (list[i].id === list[j].id) {
            list.splice(j, 1)
            j--
          }
        }
      }
      setTimeout(() => {
        this.stateChange()
      }, 0)
    }
  }
}
</script>