elementui表格合并单元格

<template>
  <div style="padding:20px">
    <el-table :data="tableData6"
              :span-method="objectSpanMethod"
              border>
      <el-table-column prop="id"
                       label="ID"
                       width="180"></el-table-column>
      <el-table-column prop="name"
                       label="姓名"></el-table-column>
      <el-table-column prop="amount1"
                       label="数值 1(元)"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanArr: [], //用于存放每一行记录的合并数
      tableData6: [
        {
          id: '1',
          name: '王小虎',
          amount1: '234'
        },
        {
          id: '1',
          name: '王小虎',
          amount1: '165'
        },
        {
          id: '2',
          name: '王小虎',
          amount1: '324'
        },
        {
          id: '2',
          name: '王小虎',
          amount1: '621'
        },
        {
          id: '2',
          name: '王小虎',
          amount1: '539'
        }
      ]
    };
  },
  mounted() {
    this.getSpanArr(this.tableData6);
  },
  methods: {
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        console.log(this.spanArr);
      }
    },
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示, [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值