element-ui表格单元格合并

花村xld

已于 2023-06-13 15:58:23 修改

阅读量1.4k

点赞数 3

文章标签： elementui vue

于 2023-06-13 15:45:34 首次发布

原文链接：https://blog.csdn.net/fz_leaves/article/details/111933859

版权

该文章展示了如何在ElementUI的表格组件中使用`:span-method`属性来根据bom.id合并重复的行数据，以达到数据展示优化的效果。通过遍历数据，计算需要合并的行数，并在`objectSpanMethod`方法中处理行和列的合并。

摘要由CSDN通过智能技术生成

使用的是element中的 :span-method="objectSpanMethod"

效果图：

数据：

this.listData = [
        {
          bom: { id: 1 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 1 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 2 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 2 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 2 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 3 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
      ];

需求是把每一列数据中相同的bom.id合并

源码奉上：

<template>
  <div class="">
    <el-table
      :data="listData"
      :span-method="objectSpanMethod"
      class="tableArea"
      style="width: 100%"
    >
      <el-table-column
        prop="parentBomVersion"
        label="序号"
        align="center"
        width="200"
      />
      <el-table-column prop="updateTime" label="工单类型" />
      <el-table-column prop="parentMaterialName" label="taskKey" />
      <el-table-column prop="parentMaterialSpecification" label="templateUrl" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="修改"
            placement="top-start"
          >
            <i class="el-icon-edit-outline" @click="modify(scope)" />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top-start"
          >
            <i class="el-icon-delete" @click="deleteData(scope)" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "myNeedDeal",
  data() {
    return {
      rowList: [],
      spanArr: [],
      position: 0,
      listData: [],
    };
  },

  methods: {
    queryData() {
      //查询操作

      this.listData = [
        {
          bom: { id: 1 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 1 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 2 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 2 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 2 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
        {
          bom: { id: 3 },
          parentBomVersion: 1,
          updateTime: "事件单",
          parentMaterialName: "shijian_01",
          parentMaterialSpecification: "/shijian_01",
        },
      ];
      this.rowspan();
    },
    rowspan() {
      this.rowList = [];
      this.spanArr = [];
      this.position = 0;  
      this.listData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (this.listData[index].bom.id === this.listData[index - 1].bom.id) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
            console.log(this.spanArr, this.position);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //表格合并行
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
  mounted() {
    this.queryData();
  },
};
</script>

其中 rowspan() 方法是筛选出需要合并的单元格。

原文出处：elementUI的表格单元格合并_fz_leaves的博客-CSDN博客