el-table 合并

最新推荐文章于 2024-06-18 18:13:04 发布

原创最新推荐文章于 2024-06-18 18:13:04 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在使用ElementUI的el-tablestripe组件时，通过`span-method`属性和自定义方法`objectSpanMethod`来合并表格行，当某一列的字段值相同时。同时，涉及到调用后台接口获取数据并在数据更新后执行`merge`方法以保持行合并状态。

实现简单的合并行：

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

表格：加上 :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()方法。