Element 多选表格前端分页 多选框回显

一、Element 多选表格前端分页 多选框回显

先上效果图：

功能拆分：
（1）先模拟100条数据在 tableData
（2）将tableData 分页切片处理：
this.tableData.slice( (this.pageNumber - 1) * this.pageSize, this.pageNumber * this.pageSize );
注意，这里使用 computed 计算属性 pageTableData 来存储切片后当前页的列表数据
（3）分页时选择数据回显并且保存选中的数据 this.getDataByPage()

完整代码实现：

<template>
  <div>
    <el-table
      id="fixTable"
      class="myt-table"
      header-cell-class-name="myt-table-header"
      border
      :data="pageTableData"  
      :row-key="getRowKeys"
      ref="multipleTable_1"
      @selection-change="handleSelectionChange"
      @select-all="selectAll"
    > <!-- :height="tableHeight || 'auto'" -->
      <el-table-column type="selection" width="40" > </el-table-column>
      <el-table-column type="index" label="序号" width="60" align="left" class-name="pollution-table-pd"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="name" min-width="200" label="企业名称"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="city" width="100" label="所属地市"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="county" width="100" label="所属区县"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="conType" width="120" label="污染物类型"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="responseLevel" width="100" label="应对级别"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="enterType" width="120" label="企业类型"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="industryType" width="100" label="行业类型"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="enterpriseLevel" width="100" label="企业等级"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="measuresType" width="160" label="措施类型"> </el-table-column>
      <el-table-column align="left" class-name="pollution-table-pd" prop="measuresDetail" min-width="400" label="措施详情"> </el-table-column>
    </el-table>

    <div class="pd-top20 pd-bottom20 pager_add" id="pageFooter" >
      <div class="select-con" >
        <span class="select-text"
          >已选中
          <span class="select-num">{{ EleSelectedNum }}</span>
          项</span
        >
        <el-button @click="allCheckEvent" class="common-btn">全部选中</el-button>
        <el-button @click="cancelSelect" class="common-btn" v-show="EleSelectedNum > 0">取消选中</el-button>
      </div>

      <el-pagination
        class="myt-pager"
        background
        layout="total, prev, pager, next,sizes"
        :total="totalCount"
        :page-sizes="[10, 20, 30, 40, 50]"
        :current-page="pageNumber"
        @current-change="pageChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNumber: 1,
      pageSize: 10,
      totalCount: 0,
      tableData: [],
      selectedIds_1: [], //当前页选中的数据
      sourceAllData: [],
      EleSelectedNum: 0,
      selectedIdsAll_1: [], //所有选中的数据包含跨页数据
    }
  },
  computed: {
    pageTableData() {
      let arr = this.tableData.slice((this.pageNumber - 1) * this.pageSize, this.pageNumber * this.pageSize)
      return arr
    },
  },
  watch: {
    // 监听全部页选中的值
    selectedIdsAll_1(val) {
      this.calculateVal(this.selectedIds_1, val) //当前值 currentVal，全部值allVal
      this.EleSelectedNum = val.length
    },
    //监听当前页选中
    selectedIds_1(val) {
      this.calculateVal(val, this.selectedIdsAll_1)
    },
  },
  methods: {
    // 分页获取数据
    getDataByPage() {
      let arr = []
      this.pageTableData.forEach((work) => {
        if (this.selectedIdsAll_1.indexOf(work.id) >= 0) {
          for (let i = 0; i < this.selectedIdsAll_1.length; i++) {
            if (this.selectedIdsAll_1[i] === work.id) {
              arr.push(work)
            }
          }
        }
      })

      setTimeout(() => {
        this.handleSelectionChange(arr)
        this.selectedIds_1 = arr
        this.pageTableData.forEach((row) => {
          for (let j = 0; j < arr.length; j++) {
            if (row.id === arr[j].id) {
              this.$refs.multipleTable_1.toggleRowSelection(row)
            }
          }
        })
      })
    },
    // 第几页
    pageChange(val) {
      this.pageNumber = val
      this.getDataByPage()
    },
    // 当前分页大小
    sizeChange(val) {
      this.pageSize = val
      this.getDataByPage()
    },
    // 计算当前页的值与总选择集合
    calculateVal(currentVal, allValue) {
      // 当前页所有列表id集合 copyData
      let copyData = [] 
      this.pageTableData.forEach((work) => {
        copyData.push(work.id)
      })

      // 当前页选中的id集合：currentVal ， 总选择集合：allValue
      currentVal.forEach((id) => {
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (allValue.indexOf(id) < 0) {
          allValue.push(id)
        }
      })

      // 当前页没有选中的id集合 noSelectIds
      let noSelectIds = [] 
      copyData.forEach((item) => {
        if (copyData.includes(item) && !currentVal.includes(item)) {
          noSelectIds.push(item)
        }
      })

      // 总选择里面的id集合
      let selectAllIds = JSON.parse(JSON.stringify(allValue))

      //总选中集合
      if (noSelectIds.length > 0) {
        noSelectIds.forEach((id) => {
          if (selectAllIds.indexOf(id) >= 0) {
            for (let i = 0; i < allValue.length; i++) {
              if (allValue[i] === id) {
                // 如果总选择中集合中有未被选中的，那么就删除这条
                allValue.splice(i, 1)
              }
            }
          }
        })
      }

    },
    // 选中
    handleSelectionChange(list) {
      let currentSelected = []
      list.forEach((item) => {
        currentSelected.push(item.id)
      })
      this.selectedIds_1 = currentSelected
    },
    // 解决elemetUI Table表格多选无数据时，复选框显示disabled点击却可勾选
    selectAll(val) {
      if (!val.length && !this.tableData.length) {
        this.$refs.multipleTable_1.clearSelection()
      }
    },
    // 取消选中
    cancelSelect() {
      this.$refs.multipleTable_1.clearSelection()
      this.selectedIdsAll_1 = []
      this.selectedIds_1 = []
    },
    // 全部选中
    allCheckEvent() {
      // 全部选中的数组
      let arr = []
      this.sourceAllData.forEach((item) => {
        arr.push(item.id)
      })

      this.selectedIdsAll_1 = arr
      let currentArr = []
      this.pageTableData.forEach((row) => {
        this.$refs.multipleTable_1.toggleRowSelection(row, true)
        currentArr.push(row.id) // 选中id数组
        this.selectedIds_1 = currentArr
      })
    },
    getRowKeys(row) {
      return row.id;
    },
  },
  created() {
    for (let i = 0; i < 100; i++) {
      let item = {
        id: i + 1,
        index: i,
        name: 'xxxxxx有限公司',
        city: '广州市',
        county: '黄埔区',
        conType: 'xx',
        responseLevel: 'xxx级',
        enterType: 'xxxx',
        industryType: 'xxxx',
        enterpriseLevel: 'x级',
        measuresType: 'xxxxx',
        measuresDetail: 'xxxxxx',
      }

      if (i === 11 || i === 12 || i === 13 || i === 14) {
        item.name = '第二页'
      }
      this.tableData.push(item)
    }

    this.sourceAllData = JSON.parse(JSON.stringify(this.tableData))
    this.totalCount = this.tableData.length
  },
}
</script>
<style scoped>
.pager_add {
  display: flex;
  background-color: #04294b;
  justify-content: space-between;
}
</style>

二、el-tree 带竖线

参考：
https://blog.csdn.net/weixin_42490398/article/details/107942461

<el-tree
	class="tree-line"
	icon-class="el-icon-circle-plus-outline"
	:indent="0"
	:data="data"
></el-tree>

// 以下为scss，记得去掉scoped，或者使用/deep/
<style lang="scss">
.tree-line{
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627C;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627C;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }
	
  // 展开关闭的icon
  .el-tree-node__expand-icon{
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf{
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>