elementUI的table组件实现全选功能

需求:最近碰见一个需求,有三万多条数据,用户点击全选按钮,要将三万条数据全部选中。
template

  <el-checkbox
        v-model="datCheckAll"
        style="float: right"
        label="全选"
        v-show="activeName == 'dat'"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllDatChange"
        border
      ></el-checkbox>
      <el-row style="height: calc(100% - 40px)" v-show="activeName == 'dat'">
      <el-table
        style="width: 100%; margin: auto"
        height="94.3%"
        border
        ref="table1"
        :row-key="bid"
        :data="DatTableData"
        @selection-change="selectChange"
        @select="selectSingleDat"
        @select-all="selectAllDat"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
        ></el-table-column>
        <el-table-column
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column
          prop="amodeldata"
          sortable
          label="基准"
        ></el-table-column>
        <el-table-column
          prop="bmodeldata"
          sortable
          label="待同步"
        ></el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        style="
          background-color: #cccbcb;
          width: 99.4%;
          position: absolute;
          bottom: 0px;
        "
        @current-change="handleCurrentChange"
        :current-page="queryInfo.num"
        :page-sizes="[100, 200, 500, 1000]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>

watch:监听

 // 监听相同dat全选方法
    datCheckAll(val) {
      if (val) {
        this.DatTableData.forEach((row, i) => {
          this.$refs.table1.toggleRowSelection(row, true)
        })
      } else {
        // 当点击全选按钮变为非选中状态,将当前所有的已经被
        // 勾选中的数据改变状态
        // this.datCheck.forEach((row) => {
        //   this.$refs.table1.toggleRowSelection(row, false)
        // })
        this.$refs.table1.clearSelection()
      }
    },

methods:

//获取第一页的一百条数据
    async getDat() {
      let { data: res } = await this.$axios.post(
        '/datasync/datcontentquery',
        JSON.stringify(this.map),
        {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
          },
        }
      )
      //将数据赋值给表格绑定数据,仅用来进行数据展示,该数据会被覆盖,不会在此数据只是进行操作。
      this.DatTableData = res.datsame.content 
      this.total = res.datsame.totalElements
    },
     //获取所有数据
    async getAllDat() {
      let map = JSON.parse(JSON.stringify(this.map))
      // 将total的真实值赋予datpagesize,调用一次函数将所有的dat数据获取到
      map.datpagesize = this.total 
      let { data: res } = await this.$axios.post(
        '/datasync/datcontentquery',
        JSON.stringify(map),
        {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
          },
        }
      )
      this.allDatData = res.datsame.content //相同dat数据的全部数据
      //将获取的所有数据的前100条数据重新赋值给表格,保持整个表格的数据来源一致。
      this.DatTableData = this.allDatData.slice(0, 100) 
    },
    //监听dat左侧表格选中数据
    selectChange(val) {
      //将当前选中的数据赋值给datCheck,在所有数据的全选按钮没有选中的情况下,最后计算时
      // 的数据就是datCheck里面的数据
      this.datCheck = val 
    },
     // 对于当前页单选和全选按钮,在所有数据全选按钮没有选中的情况下,点击选中的数据会
    // 经过‘selectChange’方法赋值给datCheck,当所有数据全选按钮选中的情况下,点击某条数据或
    // 某几十条数据后,则将被选中的数据与datClick里面的数据进行对比,如果没有相同的数据,则将选
    // 中的数据放进datClick数据里面,如果有形同的数据,则将被选中的数据从datClick里面取出来。
    // 单击选择某一页dat表格数据的select方法
    selectAllDat(selection) {
      let DatTableDataId = this.DatTableData.map((ele) => {
        return ele._id
      })
      let datClickId = this.datClick.map((ele) => {
        return ele._id
      })
      if (this.isDatAllChecked) {
        
        if (_.intersection(DatTableDataId, datClickId).length == 0) {
          this.datClick = _.concat(this.datClick, this.DatTableData)
        } else {
          
          _.intersection(DatTableDataId, datClickId).forEach((element) => {
            this.datClick.forEach((ele, i) => {
              if (ele._id == element) {
                if (this.datClick.indexOf(ele) !== -1) {
                  this.datClick.splice(this.datClick.indexOf(ele), 1)
                }
              }
            })
          })
        }
      }
    },
    // 单击选择一条dat表格数据的select方法
    selectSingleDat(selection, row) {
      // 只有当全选按钮被选中才执行下面代码,
      // 没有选中时执行selectChange函数
      // 判断当前行数据是否已经选中,若已经选中,再次点击时,从数组
      // 中取出,若没有选中,再次点击,放进数组之中。
      if (this.isDatAllChecked) {
        let arr = this.datClick.map((ele) => {
          return ele._id
        })
        if (!arr.includes(row._id)) {
          this.datClick.push(row)
        } else {
          this.datClick.forEach((ele, i) => {
            if (ele._id == row._id) {
              if (this.datClick.indexOf(ele) !== -1) {
                this.datClick.splice(this.datClick.indexOf(ele), 1)
              }
            }
          })
        }
      }
    },
        // 监听dat同步按钮
    async synchronization() {
      // dat
      let allDatDataCopy = JSON.parse(JSON.stringify(this.allDatData))
      if (this.isDatAllChecked && this.datClick.length == 0) {
        this.datCheck = allDatDataCopy
      } else if (this.isDatAllChecked && this.datClick.length !== 0) {
        this.datClick.forEach((element) => {
          allDatDataCopy.splice(allDatDataCopy.indexOf(element), 1)
        })
        this.datCheck = allDatDataCopy
      }
      // 不同dat
      let allDatDiffDataCopy = JSON.parse(JSON.stringify(this.allDatDiffData))
      if (this.isDatDiffAllChecked && this.datDiffClick.length == 0) {
        this.datDiffCheck = allDatDiffDataCopy
      } else if (this.isDatDiffAllChecked && this.datDiffClick.length !== 0) {
        this.datDiffClick.forEach((element) => {
          allDatDiffDataCopy.splice(allDatDiffDataCopy.indexOf(element), 1)
        })
        this.datDiffCheck = allDatDiffDataCopy
      }
      // swi
      let allSwiDataCopy = JSON.parse(JSON.stringify(this.allSwiData))
      if (this.isSwiAllChecked && this.swiClick.length == 0) {
        this.swiCheck = allSwiDataCopy
      } else if (this.isSwiAllChecked && this.swiClick.length !== 0) {
        this.swiClick.forEach((element) => {
          allSwiDataCopy.splice(allSwiDataCopy.indexOf(element), 1)
        })
        this.swiCheck = allSwiDataCopy
      }
      // 不同dat
      let allSwiDiffDataCopy = JSON.parse(JSON.stringify(this.allSwiDiffData))
      if (this.isSwiDiffAllChecked && this.swiDiffClick.length == 0) {
        this.swiDiffCheck = allSwiDiffDataCopy
      } else if (this.isSwiDiffAllChecked && this.swiDiffClick.length !== 0) {
        this.swiDiffClick.forEach((element) => {
          allSwiDiffDataCopy.splice(allSwiDiffDataCopy.indexOf(element), 1)
        })
        this.swiDiffCheck = allSwiDiffDataCopy
      }
      // 更改数据格式
      let arr = this.datCheck.map((ele) => {
        let aid = ele.aid
        let bid = ele.bid
        let array = { aid: bid }
        for (var key in array) {
          var newKey = aid
          array[newKey] = array[key]
          delete array[key]
        }
        return array
      })
      this.$confirm(
        '您要同步的数据为' +
          this.datCheck.length +
          '条数据',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async () => {
          if (arr.length > 10000) {
            // 当arr长度超过1万,将其拆分一个每个元素包含一万个数据的数组
            let num = arr.length / 10000
            for (let i = 0; i < num; i++) {
              this.dattb(
                this.arraydat,
                arr.slice(i * 10000, (i + 1) * 10000),
                i
              )
            }
          } else if (arr.length > 0 && arr.length <= 10000) {
            this.arraydat.datlist = arr
            await this.dattb(this.arraydat)
          }
        })
        .catch((err) => {
          // console.log(err)
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
     // dat全选按钮触发时调用
    handleCheckAllDatChange(val) {
      // 全选按钮选中时val为true,取消选中时val为false
      this.isDatAllChecked = val
      if (!val) {
        // 当全选按钮变为非选中状态,datClick中的数据将失去作用,
        // 当再次点击全选按钮变为全选状态时,datClick应该为空数组
        this.datClick = []
      }
    },
    // 监听分页方法
    handleCurrentChange(newnum) {
      this.queryInfo.num = newnum
      this.DatTableData = this.allDatData.slice(
        (newnum - 1) * this.queryInfo.pagesize,
        newnum * this.queryInfo.pagesize
      )
      let datClickId = this.datClick.map((ele) => {
        return ele._id
      })
      if (this.isDatAllChecked) {
        this.DatTableData.forEach((row) => {
          if (!datClickId.includes(row._id)) {
            this.$refs.table1.toggleRowSelection(row, true)
          }
        })
      }
    },
    // 监听pagesizel
    handleSizeChange(newSize) {
      this.queryInfo.num = 1
      this.queryInfo.pagesize = newSize
      this.DatTableData = this.allDatData.slice(0, newSize)
      let datClickId = this.datClick.map((ele) => {
        return ele._id
      })
      if (this.isDatAllChecked) {
        this.DatTableData.forEach((row) => {
          if (!datClickId.includes(row._id)) {
            this.$refs.table1.toggleRowSelection(row, true)
          }
        })
      }
    },

你可能感兴趣的:(js,elementUI)