根据表格的某一列数据合并行数

文章讲述了如何在使用Vue.js的el-table组件时,通过span-method属性和自定义方法来合并具有相同获奖名称的表格行。getSpanArr函数用于处理数据,创建一个数组来跟踪需要合并的行数。
摘要由CSDN通过智能技术生成

即当表格中“获奖名称”这个数据有多条的时候,把这些行合并起来。

<el-table :data="tableData" border :height="tableHeight" :span-method="objectSpanMethod">

        <el-table-column label="序号" align="center" width>

            <template slot-scope="scope">

               {{scope.row.order}}

            </template>

        </el-table-column>

        <el-table-column label="获奖名称" prop="awaName" align="center" width />

        <el-table-column label="获奖等级" prop="awaLev" align="center" width />

        <el-table-column label="奖金基数(元)" prop="awaBase" align="center" width>

          <template slot-scope="scope">{{scope.row.awaBase | monFormat}}</template>

        </el-table-column>

        <el-table-column label="备注" prop="remark" align="center" width="600" />

        <el-table-column label="操作" align="center" width="160">

          <template slot-scope="scope">

            <el-button

              type="text"

              size="mini"

              icon="el-icon-edit"

              v-if="scope.row"

              @click="toEdit(scope.row)"

            >修改</el-button>

            <el-popconfirm title="是否删除此条据?" @confirm="toDelete(scope.row,scope.$index)">

              <el-button slot="reference" type="text" size="mini" icon="el-icon-close">删除</el-button>

            </el-popconfirm>

          </template>

        </el-table-column>

      </el-table>

// 合并单元格

    objectSpanMethod({ rowcolumnrowIndexcolumnIndex }) {

      if (columnIndex !== 2 && columnIndex !== 3) {

        const _row = this.spanArr[rowIndex];

        const _col = _row > 0 ? 1 : 0;

        return {

          rowspan: _row,

          colspan: _col

        };

      }

    },

    getSpanArr(data) {

      this.spanArr = [];

      this.pos = 0;

      for (var i = 0; i < data.length; i++) {

        if (i == 0) {

          // 如果是第一条记录(即索引是0的时候),向数组中加入1

          this.spanArr.push(1);

          this.pos = 0;

        } else {

          if (data[i].awaName === data[i - 1].awaName) {

            // 如果itemCode相等就累加,并且push 0

            this.spanArr[this.pos] += 1;

            this.spanArr.push(0);

          } else {

            // 不相等push 1

            this.spanArr.push(1);

            this.pos = i;

          }

        }

      }

    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值