element el-table表格数据合并

针对前面文章中的数据合并出错时element表格列相同值自动合并单元格_天气晚来秋~的博客-CSDN博客

，可用下面这种方式行合并

这个可用单个，多个可自己按照逻辑多封装一下

话不多说，上代码

<template><el-table:data="tableData"borderstyle="width: 100%":span-method="objectSpanMethod"><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>
</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: [],};},created() {this.setdates(this.tableData);},methods: {setdates(arr) {const obj = {};let k;for (let i = 0, len = arr.length; i < len; i++) {k = arr[i].date; //需要合并的字段if (obj[k]) obj[k]++;else obj[k] = 1;}//保存结果{el-'元素'，count-出现次数}for (const o in obj) {for (let i = 0; i < obj[o]; i++) {if (i === 0) {this.arr1.push(obj[o]);} else {this.arr1.push(0);}}}},objectSpanMethod({ rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.arr1[rowIndex];const _col = this.arr1[rowIndex] > 0 ? 1 : 0;return [_row, _col];}},},
};
</script>
<style scoped>
</style>

element el-table表格数据合并相关推荐

element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
<template><el-table :span-method="spanMethod"><el-table-column label=" ...
Saiku Table展示数据合并bug修复（二十五）
Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据,如果点击了非空的字段按钮,则会自动进行数据合并,为空的数据行以及数据列都会自动隐藏掉. 首先我们应该定位问题: ...
asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: 1 /// <summary> 2 /// HTML Table表格数据(html)导出EXCEL 3 /// </summary> 4 /// <param n ...
使用Pandas的read_html方法读取网页Table表格数据
本文通过一个小实例,说明使用Pandas的read_html方法读取网页Table表格数据要读取的网页表格数据 http://vip.stock.finance.sina.com.cn/q/go.p ...
EXCEL表格数据合并
EXCEL表格数据合并主要针对同一个excel文件中包含多个sheet,需要将所有的数据进行汇总. 1.表格数据展示: 2.数据合并步骤: 打开excel表格(当前表格或者新建表格均可),选择数据- ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
Element：Table表格在单元格内放多个数据
在练习时候用Element的Tab表格的时候,需要在表头下的单元格内把数组的图片和名字放在同一格 (改好才发现挺憨的,这么一个简单的错误..) 但是在使用el的Tab表格时候,在<el-tabl ...

element el-table表格数据合并

element el-table表格数据合并相关推荐

最新文章

热门文章