vue-element，el-table动态合并重复单元格

最新推荐文章于 2024-04-07 17:19:06 发布
最新推荐文章于 2024-04-07 17:19:06 发布
阅读量238 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41613768/article/details/116760364
版权

效果如下
在这里插入图片描述

    <el-table
              class="ttt"
              :data="deflexsionTable" :span-method="arraySpanMethod"
              style="width: 100%"
              tooltip-effect="dark"
             
              height="1460"
              :header-cell-style="tableHeaderStyle"
            >
              <el-table-column
                label="序号"
                align="center"
                type="index"
                width="50"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="部件"
                prop="evrOcTime"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                label="评价内容"
                prop="dclName"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                label="状态量"
                prop="evrDesc"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                label="扣分"
                prop="evrReturnValue"
                show-overflow-tooltip
              >
              </el-table-column>

              <!-- <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    class="green "
                    icon="el-icon-view"
                    type="text"
                    @click="lookGrade(scope.row)"
                    >查看得分详情</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>

data({
return{
 deflexsionTable: [{
            evrOcTime: "本体", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "绝缘电阻", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "凝露", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "放电声音", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "载流能力", //评价内容
            evrDesc: "主回路直流电阻", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "载流能力", //评价内容
            evrDesc: "导电连节点升温", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "六氟化硫气体", //评价内容
            evrDesc: "六氟化硫气体泄漏", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "外观", //评价内容
            evrDesc: "标识齐全", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "外观", //评价内容
            evrDesc: "带电显示器", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "外观", //评价内容
            evrDesc: "二次仪表", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "外观", //评价内容
            evrDesc: "锈蚀", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "本体", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地引线下外观", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "凝露", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "绝缘电阻", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "凝露", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "放电声音", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "外观", //评价内容
            evrDesc: "标识齐全", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "外观", //评价内容
            evrDesc: "带电显示器", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "外观", //评价内容
            evrDesc: "二次仪表", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "外观", //评价内容
            evrDesc: "锈蚀", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "附件", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地引线下外观", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "凝露", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "绝缘电阻", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "凝露", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "绝缘性能", //评价内容
            evrDesc: "放电声音", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "机械性能", //评价内容
            evrDesc: "联跳功能", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "机械性能", //评价内容
            evrDesc: "分合闸操作", //绝缘电阻
            evrReturnValue: "0", //扣分
        },
        {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "机械性能", //评价内容
            evrDesc: "辅助开关投切状况", //绝缘电阻
            evrReturnValue: "0", //扣分
        },
        {
            evrOcTime: "操作系统及控制回路", //部件
            dclName: "机械性能", //评价内容
            evrDesc: "五防", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "辅助部件", //部件
            dclName: "外观", //评价内容
            evrDesc: "标识齐全", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "辅助部件", //部件
            dclName: "外观", //评价内容
            evrDesc: "带电显示器", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "辅助部件", //部件
            dclName: "外观", //评价内容
            evrDesc: "二次仪表", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "辅助部件", //部件
            dclName: "外观", //评价内容
            evrDesc: "锈蚀", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "辅助部件", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "辅助部件", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地引线下外观", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "辅助部件", //部件
            dclName: "接地电阻", //评价内容
            evrDesc: "接地电阻", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "标识", //部件
            dclName: "外观", //评价内容
            evrDesc: "标识齐全", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "标识", //部件
            dclName: "外观", //评价内容
            evrDesc: "带电显示器", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "标识", //部件
            dclName: "外观", //评价内容
            evrDesc: "二次仪表", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "标识", //部件
            dclName: "外观", //评价内容
            evrDesc: "锈蚀", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "标识", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地", //绝缘电阻
            evrReturnValue: "0", //扣分
        }, {
            evrOcTime: "标识", //部件
            dclName: "外观", //评价内容
            evrDesc: "接地引线下外观", //绝缘电阻
            evrReturnValue: "0", //扣分
        }


    ]}
}）,
methods:{
   // 合并表格
    rowspan() {
      for (let key of this.mergeArr) {
        let count = 0;
        this.mergeObj[key] = [];
        this.deflexsionTable.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            if (item[key] === this.deflexsionTable[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }
        });
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      if (this.mergeArr.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return {
            rowspan: this.mergeObj[column.property][rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },
},
created({
  this.rowspan();
})
不吃粉丝的小Sun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue Element table表格合并（动态）
sunshineTing2的博客
05-11 884
【代码】Vue Element table表格合并（动态）
VUE合并内容相同列 完整代码
yhj68100055的博客
02-22 157
VUE合并内容相同列 完整代码
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
最新发布
泶雪乖女
04-07 3043
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。我们可以看到，所有列，只要数据相同的单元格都被合并了，包括我不想合并的单元格，这时候就要。只需要加个if判断即可指定要合并哪些列。这样就只合并了我们指定的那几列了。这时候再看，就是我们想要的效果了。
当在Vue项目中渲染数据重复的问题（去重）
weixin_46319117的博客
03-11 1883
this.projectNameData = res.data.data //去掉重复的数据 var hash = {}; this.projectNameData = this.projectNameData.reduce(function (item, next) { hash[next.projectPresetId] ? '' : hash[next.projectPresetId] = true &
elementUI table表格动态合并行
s_156的博客
03-13 2004
elementUI table表格动态合并行
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
本文将详细介绍如何在Vue中使用Element-UI的`el-table`组件来合并上下两行相同数据的单元格。 首先，我们需要在HTML模板中设置`el-table`组件。在以下示例中，我们定义了一个表格，包含四个列（项目名称、污染区段...
el table 合并相同数据单元格
qq_54649586的博客
08-29 158
el table 合并相同数据单元格
Vue动态多级表头、相同内容列合并
weixin_45275107的博客
10-25 2457
表头数据我是在后端做好之后传到前端的，对应这个格式，可以实现增加或减少。该函数可以返回一个包含两个元素的数组，第一个元素代表。方法可以实现合并行或列，方法的参数是一个对象，里面包含。过滤数据：（判断第一列内容是否相同 返回数组 由。element ui 官网提供了合并的方法。也可以返回一个键名为。(跨几行)，第二个元素代表。
el-table 怎么合并相同单元格
颜良文丑的博客
02-03 4869
项目需求table表格中，相同的类型合并成一个单元格展示。
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
热门推荐
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
el-table合并一列中数据相同的单元格
Avery233的博客
05-17 3692
html相关代码 <el-table :data="tableData" border class="tableDataF" :span-method="objectSpanMethod"> <el-table-column label="类名" align="center" prop="class"></el-table-column> <el-table-column label="小类" align="center" prop="class
el-table合并单元格附表单包含表格
anny_mei的博客
12-27 405
el-table合并
elementUI表格 el-table-column 的 prop属性 如何通过判断转换值
走在搬砖的路上！
06-09 1万+
将某prop 参数的值，转换显示为 自定义的值 替换createTime那一行： <el-table-column :label="htmlText.tbDate" width="80"> <template slot-scope="scope"> <span v-if="scope.row.createTime == 0">正常</span> //这里使用===还是==得看返回值是什么类型的，需不需要转换啥的，自己尝试一下就..
利用element-ui的表格实现复杂合并单元格
weixin_48142432的博客
03-29 1482
利用element-ui的表格实现复杂合并单元格 话不多说，先呈效果图 首先我们得先了解下请求回来的数据是否和我一致哦，不一致的话可能文章就对你没啥用啦,以下是请求回来的数据（数据有点多哈，主要让你们看看数据格式是否和我一样） "list":[ { "rowNum":null, "industry":"SCBC", "custCode":"001421", "custname":"深圳软件科技有限公司", "draftType":"1", "draftTypeName":"银票-电票", "lastBal
element table合并行 值相同的合并
c_qianxia5040的博客
04-02 2397
结构： <el-table :data="topicTableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 10px"> <el-table-column prop="func" label="功能"/> <el-table-column prop="desc" label.
vue3 element-puls el-table 汇总行单元格合并
05-17
要实现Vue3 Element-Plus的el-table汇总行单元格合并，你可以使用`span-method`属性来定义一个函数，该函数可以返回每个单元格需要合并的行数和列数。下面是一个示例代码： ```html <el-table :data="tableData" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值