element-ui table :span-method(行合并)

参考:https://blog.csdn.net/qq_29468573/article/details/80742646        

element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义:

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {    //用于设置要合并的列
          if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
            return {
              rowspan: 2,     //合并的行数
              colspan: 1          //合并的列数,设为0则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

研究这个例子后不难发现,实现合并行的方法其实在每一行数据渲染的时候都会执行,只不过在渲染过程中我们设置了它合并的行数和列数,以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。处理过程如下:

getSpanArr(data) { 
  for (var i = 0; i < data.length; i++) {
        if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
    if (data[i].name === data[i - 1].name) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
        }
    }
},

data就是我们从后台拿到的数据,通常是一个数组;spanArr是一个空的数组,用于存放每一行记录的合并数;pos是spanArr的索引。上述代码意思是:如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,以此往复,得到所有行的合并数,0即表示该行不显示。
 


cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
},

然后根据得到的数组spanArr对表格进行合并渲染,并绑定合并方法

<el-table
      border
      :data="tableData"
      style="width: 100%;max-height: 160px;overflow: auto"
      :span-method="cellMerge">
    ......
</el-table>

注:后台获取数据的时候根据要在前台进行合并的字段进行排序,使要合并的字段值相同的记录依次相邻。

完整示例:

<el-table
      :data="tableData"
      :span-method="cellMerge"
      border
      style="width: 60%;">
      <el-table-column
        prop="id"
        label="商户ID">
      </el-table-column>
      <el-table-column
          prop="m_name"
          label="商户名称">
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="price"
        label="产品价格">
      </el-table-column>
    </el-table>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [{
          id: '1',
          m_name: '白商户',
          name: '白1',
          price: '100'
        }, {
          id: '1',
          m_name: '白商户',
          name: '白2',
          price: '101'
        }, {
          id: '1',
          m_name: '白商户',
          name: '白3',
          price: '102'
        }, {
          id: '2',
          m_name: '黑商户',
          name: '黑1',
          price: '200'
        }, {
          id: '2',
          m_name: '黑商户',
          name: '黑2',
          price: '201'
        },{
          id: '3',
          m_name: '黄商户',
          name: '黄1',
          price: '30'
        }],
        spanArr: [],
        pos: '',
      }
    },
    created(){
      this.getSpanArr(this.tableData)
    },
    methods: {
      //需要生成一个与行数相同的数组记录每一行设置的合并数
      getSpanArr(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;
            }
          }
        }
      },
      cellMerge({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }
  })
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值