element-ui el-table 如何实现合并单元格-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui el-table 如何实现合并单元格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-table的组件的可以合并单元格，先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。

比如：代码中定义:span-method="objectSpanMethod"

 <el-table
          :data="media_showid_info.showids"
          style="width: 100%"
          max-height="250"
          border
          :span-method="objectSpanMethod"
        >
          <el-table-column prop="id" label="id" width="120">
          </el-table-column>
          <el-table-column
            prop="type_name"
            label="类型"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="time" label="时间" width="210">
          </el-table-column>
          <el-table-column prop="no." label="编号" width="120">
          </el-table-column>
          <el-table-column prop="match" label="位置" width="120">
            <template slot-scope="scope">
              <span v-if="'match' in scope.row"
                >{{ scope.row.match }}</span
              >
              <span v-else style="color: #c0c4cc; font-size: small">无</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope" v-if="scope.row.match">
              <el-button
                @click.native.prevent="
                  check_result(scope.row.id, scope.row.match)
                "
                type="text"
                size="small"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>

objectSpanMethod实现是在方法区，具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删除，展示的话是展示几行一列。

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row && columnIndex == 0 && column.label === "广告位showid") {
        if (this.rowSpanList && this.rowSpanList[rowIndex]) {
          let rowSpan = this.rowSpanList[rowIndex];
          return [rowSpan, 1];
          // 相同id有几个就绘制成几行一列
        } else {
          return [0, 0];
          // 重复的id值，已经绘制过，不需要在展示id了，删除掉改单元格的绘制
        }
      }
    },

{ row, column, rowIndex, columnIndex }四个参数表示row行数据，column列数据，rowIndex行标，columnIndex列标

rowSpanList是记录id分布的，是在展示数据获取及处理时计算生成的，大致逻辑是

若当前id与列表中上一个数据的id相同：

if ( this.info.sids[i].id ===this.info.sids[i - 1].id)

该相同id的起始位置标记是position

相同的话计数rowSpanList加1：this.rowSpanList[position] += 1

              this.rowSpanList = [];
              var position = 0;
              for (var i in this.info.sids) {
                if (i === "0") {
                  position = 0;
                  this.rowSpanList.push(1);
                } else {
                  if (
                    this.info.sids[i].id ===
                    this.info.sids[i - 1].id
                  ) {
                    this.rowSpanList[position] += 1; //项目名称相同，合并到同一个数组中
                    this.rowSpanList.push(0);
                  } else {
                    this.rowSpanList.push(1);
                    position = i;
                  }
                }

最后this.rowSpanList可能值是[2,0,3,0,0,1]

数字2表示有两个一样的，在table渲染中表示该单元格需要占位2行1列。

0表示跟上一个id一样，不需要标记，在table渲染中表示该单元格需要删除。文章来源地址https://www.toymoban.com/news/detail-436506.html

到了这里，关于element-ui el-table 如何实现合并单元格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！