elementUI 表格合并相同数据的列

elementUI 表格如何合并相同数据的列？

在编写表格table中，会出现合并数据相同的列这种需求，如图：

实现方法

添加span-method 方法，elementUI提供了span-method方法让我们可以动态合并表格，其中有四个参数，分别是row, column, rowIndex, columnIndex

<!--
row:代表当前行的值
column:代表当前列的值
rowIndex:当前行的索引
columnIndex:当前列的索引
--><el-table :data="tableData" :span-method="objectSpanMethod" ><!--objectSpanMethod是定义的逻辑方法，可以根据自己需求定义-->

objectSpanMethod的具体实现

setdates(arr) {   //获取数组var obj = {},k, arr1 = [];for(var i = 0, len = arr.length; i < len; i++) {k = arr[i].date;//合并所需要的列if(obj[k])obj[k]++;elseobj[k] = 1;}console.log(obj)//保存结果{el-'元素'，count-出现次数}for(var o in obj) {for(let i=0;i<obj[o];i++){if(i===0){this.arr1.push(obj[o])}else{this.arr1.push(0)}}}console.log(this.arr1);},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 ) {let _row = this.arr1[rowIndex]let _col = this.arr1[rowIndex] > 0 ? 1 : 0return [_row,_col]}}

完整代码

<template><el-table:data="tableData"borderstyle="width: 100%"  :span-method="objectSpanMethod" ><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>export default {name: "table",data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],arr1:[],arr2:[]}},created() {this.setdates(this.tableData)},methods: {setdates(arr) {var obj = {},k, arr1 = [];for(var i = 0, len = arr.length; i < len; i++) {k = arr[i].date;//需要合并的字段if(obj[k])obj[k]++;elseobj[k] = 1;}console.log(obj)//保存结果{el-'元素'，count-出现次数}for(var o in obj) {for(let i=0;i<obj[o];i++){if(i===0){this.arr1.push(obj[o])}else{this.arr1.push(0)}}}console.log(this.arr1);},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 ) {let _row = this.arr1[rowIndex]let _col = this.arr1[rowIndex] > 0 ? 1 : 0return [_row,_col]}}}};
</script><style scoped></style>

查看原文

elementUI 表格合并相同数据的列相关推荐

element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
html5 li表格纵向合并,vue elementui 表格合并/纵向表头
使用 elementui 做项目的时候大家应该会遇到很多关于表格的需求下面是总结的两个项目中遇到的问题. 查看文档的话是很简单, 但是很多需求还是需要大家自己去写的. 第一个 --- 表格合并 1. ...
elementUI表格----合并单元格
直接复制到文件中,看看就能明白怎么用原文地址: https://blog.csdn.net/qq_14993591/article/details/124048897 <template> ...
elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
elementui表格获取mysql数据_vue+element-ui表格封装tag使用slot插槽标签
我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性.在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性.首先了解什么是插槽. 插槽省去官方的复杂 ...
Excel中VBA实现文件夹表格合并和数据提取
多个文件夹下excel文件的提取复制 Public Sub 取出文件() Dim x1, x2, x3, x4, x5, arr Dim mysheet1, fs, fo, fd, fi, fe Di ...
python列表行列选择_Python第七课——如何选取excel表格的行数据和列数据
# Section0 print("-"*30 + "Begin Section 0 开场" + "-"*30) print("l ...
[Python] 提取Excel表格中的数据——某列数据、转拼音等
import xlrd import re filepath = r'(这里填Excel表的文件位置)'# 提取Excel表中的信息(下列数据根据不同的Excel表的数据进行更改) data=xlrd ...

elementUI 表格合并相同数据的列

elementUI 表格如何合并相同数据的列？

实现方法

完整代码

elementUI 表格合并相同数据的列相关推荐

最新文章

热门文章

elementUI 表格 合并相同数据的列

elementUI 表格 如何合并相同数据的列？

实现方法

完整代码

elementUI 表格 合并相同数据的列相关推荐

最新文章

热门文章

elementUI 表格合并相同数据的列

elementUI 表格如何合并相同数据的列？

elementUI 表格合并相同数据的列相关推荐