自定义合并el-table多行多列表格--方案1（转载）

最新推荐文章于 2024-05-23 14:42:14 发布

入坑摸鱼

最新推荐文章于 2024-05-23 14:42:14 发布

阅读量368

点赞数

文章标签： vue.js javascript ecmascript

原文链接：https://blog.youkuaiyun.com/qq_41580802/article/details/127314734

版权

文章展示了如何在Vue中使用ElementUI的el-table组件，通过span-method属性和自定义方法objectSpanMethod来实现表格中数据的列合并，主要涉及到的数据处理和条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>