根据指定值合并el-table行

最新推荐文章于 2024-08-02 13:26:42 发布

农夫_山泉水

最新推荐文章于 2024-08-02 13:26:42 发布

阅读量467

点赞数 9

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_47793359/article/details/135679011

版权

文章介绍了如何使用Vue和ElementUI的el-table组件实现一个动态列合并的表格，展示团队群的修复状态，包括修复中数量、已修复数量以及修复中占比和已修复占比。

摘要由CSDN通过智能技术生成

<template>
  <div>
   
    <el-table id="excelTable" ref="excelTable" :data="tableData" :span-method="spanMethod" border style="width: 100%"
      :header-cell-style="handerMethod">
      <el-table-column prop="title" label="团队群" width="180" align="center">
      </el-table-column>
      <el-table-column prop="benlonetame" label="团队" width="180" align="center">
      </el-table-column>
      <el-table-column prop="total" label="总数" align="center" />
      <el-table-column prop="repairingCnt" label="修复中" align="center">
      </el-table-column>
      <!-- <el-table-column prop="isrepairingCnt" label="修复中占比" align="center">
        <template slot-scope="scope">
          {{ getisrepairingCnt(scope.row) + '%' }}
        </template>
      </el-table-column> -->




      <el-table-column prop="RepairedCnt" label="已修复" align="center">
      </el-table-column>
      <!-- <el-table-column prop="isRepairedCnt" label="已修复占比" align="center">
        <template slot-scope="scope">
          {{ getisRepairedCnt(scope.row) + '%' }}
        </template>
      </el-table-column> -->

      <el-table-column prop="repairDate" label="最晚时间" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          benlonetame: "协调室",
          score: 0,
          repairDate: '2024-037-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '管理室',
          total: 44
        },
        {
          benlonetame: "研发队",
          score: 1,
          repairDate: '2024-038-31',
          RepairedCnt: 2817,
          repairingCnt: 210,
          title: '基础服务研发',
          total: 3027
        },
        {
          benlonetame: "平台团队",
          score: 1,
          repairDate: '2024-039-31',
          RepairedCnt: 4221,
          repairingCnt: 462,
          title: '基础服务研发',
          total: 2788
        },
        {
          benlonetame: "基础团队",
          score: 2,
          repairDate: '2024-031-31',
          RepairedCnt: 4752,
          repairingCnt: 222,
          title: '研发',
          total: 8160
        },
        {
          benlonetame: "零售",
          score: 2,
          repairDate: '2024-033-31',
          RepairedCnt: 222,
          repairingCnt: 211,
          title: '研发',
          total: 442
        },
        {
          benlonetame: "研发",
          score: 2,
          repairDate: '2024-032-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '研发',
          total: 44
        },
        {
          benlonetame: "惠研发",
          score: 3,
          repairDate: '2024-034-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用',
          total: 44
        },
        {
          benlonetame: "市场队",
          score: 3,
          repairDate: '2024-0355-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用',
          total: 44
        },
        {
          benlonetame: "基础",
          score: 3,
          repairDate: '2024-0366-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '批发应用',
          total: 44
        },
        {
          benlonetame: "管理",
          score: 4,
          repairDate: '2024-0377-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台群',
          total: 44
        },
        {
          benlonetame: "协同帮呵呵",
          score: 4,
          repairDate: '2024-0388-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台群',
          total: 44
        },
        {
          benlonetame: "统筹111",
          score: 4,
          repairDate: '2024-0399-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台群',
          total: 44
        },

        {
          benlonetame: "统筹111",
          score: 4,
          repairDate: '2024-0399-31',
          RepairedCnt: 42,
          repairingCnt: 2,
          title: '中台群',
          total: 44
        }
      ],
      dataArr: [],
      mergeObj: {},
      mergeArr: ['benlonetame', 'title'],//需要合并的key值
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getSpanArr(this.tableData);
  },
  beforeDestroy() { },
  methods: {
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              // 如果当前行和上一行其值不相等 
              count = index; // 记录当前位置 
              this.mergeObj[key].push(1); // 重新push 一个 1
            }
          }
        })
      })
    },
    // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断列的属性
      if (this.mergeArr.indexOf(column.property) !== -1) {
        // 判断其值是不是为0 
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },





    // spanMethod({ row, column, rowIndex, columnIndex }) {
    //   return spanMethod({ row, column, rowIndex, columnIndex }, this.tableData)
    // },
    // 隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 4 || columnIndex === 6) {
        return { display: 'none' }
      }
      if (rowIndex === 0 && columnIndex === 3 || rowIndex === 0 && columnIndex === 5) {
        this.$nextTick(() => {
          document.querySelector(`.${column.id}`).setAttribute('colspan', '2')
        })
      }
    },

    getisrepairingCnt(obj) {
      let num = 0
      num = (obj.repairingCnt / obj.total) * 100
      return num.toFixed(2)
    },
    getisRepairedCnt(obj) {
      let num = 0
      num = (obj.RepairedCnt / obj.total) * 100
      return num.toFixed(2)
    }
  },
};
</script>

<style scoped lang="less">
::v-deep {
  .total {
    background: #f5f7fa;
  }
}
</style>

效果图：