自定义合并el-table多行多列表格

一个敲代码不秃头的俗人

已于 2022-10-14 10:10:47 修改

阅读量1.3k

点赞数 2

分类专栏： vue el-table 文章标签：前端 elementui

于 2022-10-14 10:03:31 首次发布

本文链接：https://blog.csdn.net/qq_41580802/article/details/127314734

版权

vue el-table 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue，对table组件进行修改，实现随意合并列的效果

<template>
  <div class="app-container">
    <el-table :data="testTable" border :span-method="objectSpanMethod">
      <el-table-column prop="name" align="center" label="商品名称"> </el-table-column>
      <el-table-column prop="classSecondName" align="center" label="商品小类名称">
      </el-table-column>
      <el-table-column prop="DW" align="center" label="单位"> </el-table-column>
      <el-table-column prop="lastYear" align="center" label="上年度结余"> </el-table-column>
      <el-table-column prop="plan" align="center" label="计划发放量"> </el-table-column>
      <el-table-column prop="currentLQ" align="center" label="本年度领取"> </el-table-column>

      <el-table-column prop="cardYE" align="center" label="卡内余额"> </el-table-column>
      <el-table-column prop="cardKY" align="center" label="卡内可用余额"> </el-table-column>
      <el-table-column prop="currentKC" align="center" label="当前库存"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      testTable: [
        {
          index: 1,
          name: '白面',
          classSecondName: '白面（20斤/袋）',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 75
        },
        {
          index: 2,
          name: '小杂粮',
          classSecondName: '小米',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 75
        },
        {
          index: 3,
          name: '小杂粮',
          classSecondName: '荞面',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 85
        },
        {
          index: 4,
          name: '小杂粮',
          classSecondName: '糕面',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 86
        },
        {
          index: 5,
          name: '大米',
          classSecondName: '大米（20斤/袋）',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 75
        },
        {
          index: 6,
          name: '大米',
          classSecondName: '大小米（20斤/袋）',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 75
        },

        {
          index: 7,
          name: '小杂粮',
          classSecondName: '荞面',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 85
        },
        {
          index: 8,
          name: '小杂粮',
          classSecondName: '糕面',
          DW: '斤',
          lastYear: 0,
          plan: 18,
          currentLQ: 6,
          cardYE: 12,
          cardKY: 0,
          currentKC: 86
        }
      ],
      // 合并源对象
      mergeObj: {},
      mergeList: [
        'name',
        'classSecondName',
        'DW',
        'result',
        'lastYear',
        'plan',
        'currentLQ',
        'cardYE',
        'cardKY'
      ]
    };
  },
  mounted() {
    this.mergeRowSpan();
  },
  methods: {
      mergeRowSpan () {
      for (let key of this.mergeList) {
        //count 用来记录要合并数据第一行的索引，this.mergeObj[key][count] ==>this.mergeObj["name"][1]==>name:[1,2,0,0,0]中的2
        let count = 0;
        this.mergeObj[key] = [];
        this.testTable.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            if (
              item[key] === this.testTable[index - 1][key] &&
              item.name === this.testTable[index - 1].name
            ) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }
        });
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeList.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return {
            rowspan: this.mergeObj[column.property][rowIndex],
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    }
  }
};
</script>