element ui合并表格

最新推荐文章于 2024-09-26 17:58:41 发布

没头发的卑微打工人

最新推荐文章于 2024-09-26 17:58:41 发布

阅读量190

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45972345/article/details/110847516

版权

ElementUI 表格行合并数据处理前端开发

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

element ui合并表格

这是官网上的效果，传送门

这是我合并之后的样子，
这是我的效果
首先要保证你的数据是一条一条的，然后要合并的地方得有一个地方是用于区分到底合并不合并的，
上代码

<el-table
:data="listData"
:span-method="objectSpanMethod"
class="tableArea"
style="width: 100%"
>
	<el-table-column prop="type" label="品种" />
	<el-table-column prop="child" label="內容"/>
	<el-table-column prop="num" label="数量" />
	<el-table-column prop="total" label="总数量" />
</el-table>

data() {
    return {
      arr: [],
      rowList: [],
      spanArr: [],
      position: 0,
      listData: [],
    };
  },
  created() {
    //因为后端返给我的结构是嵌套格式的所以先要整理一下数组
    this.arr.forEach((element) => {
      element.options.forEach((item) => {
        let obj = {};
        obj = item;
        obj.type= element.type;
        obj.code = element.code;//用于标识相同行的唯一值
        this.listData.push(obj);
      });
    });
    console.log(this.listData);
    this.rowspan();
  },
  methods: {
    rowspan() {
      this.listData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.listData[index].code ===
            this.listData[index - 1].code
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } 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,
        };
      }
    },
  },