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

最新推荐文章于 2024-06-12 14:08:25 发布
最新推荐文章于 2024-06-12 14:08:25 发布
阅读量284 收藏 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
关注
专栏目录
Element ui el-table 合并单元格
m0_56540662的博客
06-16 1736
mergeRecording: [], // 合并记录 存放需要合并列的每行对应的合并数 [[当前行对应的合并数, 当前行对应的合并数, ...], ...]this.mergeRecording[i].push(count) // 本单元格的合并的开头索引值。this.mergeObj[key][count] += 1 // 上一行的合并数+1。this.mergeRecording[i] = [] // 记录本列合并的开头索引值。this.mergeObj[key] = [] // 记录合并数组。
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
el-table 怎么合并相同单元格
颜良文丑的博客
02-03 5328
项目需求table表格中，相同的类型合并成一个单元格展示。
el-table 合并相同单元格
Collapsar_的博客
01-16 645
el-table 合并相同的单元格。
el-table合并相同数据的单元格
weixin_63954739的博客
12-17 860
相同的数据合并单元格。
el-table合并表头，合并数据相同的单元格
TomBlibe的博客
07-07 895
header-cell-style="handerMethod" //合并表头用这个。:span-method="mergeSub" //合并数据相同的单元格。
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样式的有效方法。 ...
vue+element-ui表格之相同数据合并单元格，动态生成
sxl_lala的博客
12-11 1068
span-method="(scope) => objectSpanMethod(scope, props)"，scope作用域，props绑定的数据。首先利用组件的方法，他们用的时候表格都是死的,而我的表格是动态生成,处理数据的时候列表数据data传不进去，方法不可行。
vue+elementUI 动态合并数据相同的单元格（可指定合并列）
weixin_42178050的博客
10-11 1125
vue+elementUI 动态合并数据相同的单元格（可指定合并列）
table自动合并相同值得单元格的例子
10-26
一个简单的自动合并相同值单元格的例子，简单易懂
el-table实现表格合并
最新发布
sh11223312的博客
06-12 691
（Element UI 的表格组件）时，你可以通过自定义合并单元格的逻辑来实现表格单元格的合并。Element UI 提供了。，从而实现表格行的合并。我这里的需求是排除第4、5和6列的合并（基于0索引），其他列根据。来判断当前行是否与前一行相同，如果相同则增加合并数量，否则重置合并计数。：这个方法用于计算每一行需要合并的数量，并存储在。以下是一个详细的思路和示例，展示如何在。属性，用于控制行或列的合并。： 这个方法根据列索引和。中的值来确定单元格的。
Element-UI中el-table根据每行中相同的数据自动合并其中的列(但不合并行)
m0_62022586的博客
07-21 530
【代码】Element-UI中el-table根据每行中相同的数据自动合并其中的列(但不合并行)
el-table里面数据相同合并单元格
qq_49266680的博客
04-08 258
el-table里面数据相同合并单元格。
el-table合并行或列，el-table 怎么把表格相同的数据 合并为一行
qq_46302247的博客
02-28 5307
【代码】el-table合并行或列。
el table 合并相同数据单元格
qq_54649586的博客
08-29 175
el table 合并相同数据单元格
el-table 动态合并单元格
weixin_42178050的博客
12-06 839
const getSpanArr = (tableData) => { //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱 data.spanArr = [] data.pos = 0 //遍历数据 tableData.forEach((item, index) => { //判断是否是第一项 if (index === 0) { ...
element用法总结
香蕉你个芭呐呐的博客
12-23 3108
表格合并单元格 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 如下：合并列 html...
el-table相同数据行单元格合并
problemRecord的博客
07-14 2825
el-table相同数据行单元格合并
vue3 element-puls el-table 汇总行单元格合并
05-17
要实现Vue3 Element-Plus的el-table汇总行单元格合并，你可以使用`span-method`属性来定义一个函数，该函数可以返回每个单元格需要合并的行数和列数。下面是一个示例代码： ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="合计" :span-method="objectSpanMethod"> <template #default="{ rows, row, column, $index }"> <span v-if="$index === 0">{{ row.total }}</span> </template> </el-table-column> </el-table> ``` 在上面的代码中，我们定义了一个`objectSpanMethod`方法，并将其赋值给`span-method`属性。这个方法接收四个参数：`{ rows, row, column, $index }`。其中`rows`是当前列的所有行数据，`row`是当前行数据，`column`是当前列数据，`$index`是当前行的索引。 下面是`objectSpanMethod`方法的实现： ```js methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 3) { if (rowIndex === 0) { return { rowspan: this.tableData.length, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } } ``` 在上面的代码中，我们检查当前列是否为第四列（即“合计”列），如果是，我们检查当前行是否为第一行。如果是，我们返回一个对象`{ rowspan: this.tableData.length, colspan: 1 }`，其中`rowspan`表示当前单元格需要合并的行数，`colspan`表示当前单元格需要合并的列数。如果当前行不是第一行，则返回一个空对象`{ rowspan: 0, colspan: 0 }`，表示当前单元格不需要合并。 这样，我们就可以实现Vue3 Element-Plus的el-table汇总行单元格合并了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值