首页 > 其他分享 >el-table关于多行合并(部分根据id值合并)

el-table关于多行合并(部分根据id值合并)

时间:2022-12-08 10:34:51浏览次数:43  
标签:el 1223 合并 spanOneArr columnIndex 2022 table id

 

 

  <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 0">
      <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
      <el-table-column prop="time1" label="开始时段" align="center">
      </el-table-column>
      <el-table-column prop="time2" label="结束时段" align="center">
      </el-table-column>
      <el-table-column prop="week" label="申报策略" align="center">
      </el-table-column>
      <el-table-column prop="date" label="平衡预度" align="center">
      </el-table-column>
      <el-table-column prop="a" label="策略电力" align="center">
      </el-table-column>
      <el-table-column prop="b" label="策略电价" align="center">
      </el-table-column>
      <el-table-column prop="c" label="阶梯段" align="center">
      </el-table-column>
      <el-table-column prop="d" label="电力" align="center">
      </el-table-column>
      <el-table-column prop="e" label="电价" align="center">
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button @click="add(scope.row)" type="text" size="small">新增</el-button>
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
 data() {
      return {
        tableData: [
          {
            id: "12987123",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '1',
            d: '1223',
            e: '1223',
          },
          {
            id: "12987123",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '13',
            d: '1223',
            e: '1223',
          },
          {
            id: "12987124",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '1',
            d: '1223',
            e: '1223',
          },
          {
            id: "12987125",
            time1: '2022',
            time2: '2022',
            week: "周二",
            date: "6月21",
            a: '1',
            b: '1223',
            c: '1',
            d: '1223',
            e: '1223',
          },
        ],
      };
    },

methods: {
      add(e){    
        console.log(e,"e")
      },
      del(){},
      //合并单元格调用方法
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
          /*
          表格数据:this.tableList
          判断合并行数:this.mergeColumn()
          */
          const _row = (this.mergeColumn(this.tableData).one)[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      //判断合并行数
      mergeColumn(data) {
        const spanOneArr = []
        let concatOne = 0
        data.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1)
          } else {
            //name 修改
            if (item.id === data[index - 1].id) { //第一列需合并相同内容的字段
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }
          }
        })
        return {
          one: spanOneArr
        }
      },
}

 

标签:el,1223,合并,spanOneArr,columnIndex,2022,table,id
From: https://www.cnblogs.com/ting-0424/p/16965377.html

相关文章

  • (转)Shell解析处理XML方法汇总
    原文:https://blog.mythsman.com/post/5d2b5ebf25601931a5f8d885/前言前几天干活的时候遇到一个需要解析处理xml文件的一个需求,当时考虑到逻辑比较复杂,因此用java慢慢搞了......
  • Powershell 包含字符串
    字符串包含的三种方法 Console.WriteLine("请输入第一个字符串");           stringstr1=Console.ReadLine();           Console.WriteLine......
  • LocalDateTime去掉T,@JsonFormat有效,JSONField失效
    @ApiModelProperty(value="开机时间")@JSONField(format="yyyy-MM-ddHH:mm:ss")privateLocalDateTimebootTime;返回的结果中间有T"createTime":"2022-07-04T......
  • 控制台报错:ReferenceError: FirstSteelMaking is not defined
    原因可能是中午睡觉,乱按键盘输入了代码FirstSteelMaking导致报错,去掉FirstSteelMaking即可:  参考:https://www.cnblogs.com/blog577109142/p/15703172.html ......
  • 用Java敲出hello world
    用Java敲出HelloWorldProcess新建文件更改命名为Hello.java记住固定格式publicclassHello{ publicstaticvoidmain(String[]arges){ System.out.print('He......
  • AcrelEMS-MED医院综合能效管理平台在医院电力中的应用
     摘要:随着社会的发展和经济的进步,人类社会对能源的消耗以及后续需求越来越大,现代能源危机日益严重,因此可持续发展的概念应运而生。作为服务型机构,医院在建设和运行过程中产......
  • 分布式实时日志:ELK 的部署架构方案
    一、概述ELK已经成为目前最流行的集中式日志解决方案,它主要是由Beats、Logstash、Elasticsearch、Kibana等组件组成,来共同完成实时日志的收集,存储,展示等一站式的解决方案......
  • Error_ Requires Babel _^7.0.0-0_, but was loaded with _6.26.3_.异常解决
    使用webpack初始化工程,写了个简单的js函数,想将其打包成exe执行,在build的时候报错Error:RequiresBabel"^7.0.0-0",butwasloadedwith"6.26.3".Ifyouaresu......
  • Vue设计table中的身份证号加密显示
    为了保护用户隐私,需要对身份证号中间进行加密,且需要考虑末尾带有X的情况话不多少直接上代码,运用正则解决:<el-table-columnprop="idcard"label="身份证"width="180">......
  • shell脚本列出docker所有tag
    docker-tags-list.sh#!/bin/bash#-----------------------------------------------------------------#FileName:docker-tags-list.sh#Date:2021-12-24#Author......