el-table 合并

最新推荐文章于 2024-08-13 23:10:15 发布

Humor_L

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量202

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/humor_l/article/details/134159264

版权

实现简单的合并行：

某列的字段相同需要合并时：

表格：加上 :span-method=" "方法

<el-table stripe
                      v-loading='loading'
                      :data='tableData.data'
                      border
                      :span-method="objectSpanMethod"
                      size='small'
                      :key="Math.random()"
                      ref='selection'
                      style='width: 100%'
            >

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let me = this;
        if (me.idArr.length > 0) {
          //因为第0列是数字或者选择框，所以columnIndex为1（columnIndex是需要合并第几列）
          if (columnIndex === 1) {
            const _row_1 = this.idArr[rowIndex];
            const _col_1 = _row_1 > 0 ? 1 : 0;
            return {
              rowspan: _row_1,
              colspan: _col_1
            }
          }
        }
      },

调用后台接口：

queryData（）{
    this.$axios.post('', {}).then(function (data) {
      me.tableData.data = data;
      me.merage();
      me.loading=false;
    })
}

merage(){
        let me = this;
        me.idPos=0;
        me.idArr = [];
        if(me.tableData.data.length>0){
          for (let i = 0; i < this.tableData.data.length; i++) {
            if (i === 0) {
              me.idArr.push(1);
              me.idPos = 0;
            }else{
                 //此处是合并的相同的机构名称orgname
              if (this.tableData.data[i].orgname === this.tableData.data[i - 1].orgname) {
                this.idArr[this.idPos] += 1;
                this.idArr.push(0);
              }
              else {
                this.idArr.push(1);
                this.idPos = i;
              }
            }
          }
        }else{
          me.idArr = [];
        }
      },

结尾：在调用完获取数据接口后就要执行merag()方法。