php 相同数据合并单元格,elementUI table合并相同数据的单元格
直接扔代码~
import moment from "moment";
export default {
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0){
const _row = this.spanArr[rowIndex]
const _col = _row>0?1:0;
return{
rowspan:_row,
colspan:_col
}
}
if(columnIndex === 1){
const _row = this.spanArr[rowIndex]
const _col = _row>0?1:0;
return{
rowspan:_row,
colspan:_col
}
}
}
},
mounted:function(){
let contactDot = 0;
this.tableData4.forEach((item,index) => {
item.index = index;
if(index === 0){
this.spanArr.push(1);
}else{
if(item.id === this.tableData4[index - 1].id){
this.spanArr[contactDot] +=1;
this.spanArr.push(0);
}else{
this.spanArr.push(1);
contactDot = index;
}
}
});
},
data() {
return {
spanArr:[],
tableData4: [
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10
},
{
id: "12987122",
name: "王小虎",
amount1: "165",
amount2: "4.43",
amount3: 12
},
{
id: "你好",
name: "王小虎",
amount1: "324",
amount2: "1.9",
amount3: 9
},
{
id: "你好",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17
},
{
id: "你好",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17
},
{
id: "你",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17
},
{
id: "你",
name: "王小虎",
amount1: "621",
amount2: "2.2",
amount3: 17
},
{
id: "你",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15
},
{
id: "他",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15
}
],
formLabelWidth: "90px"
};
},
computed: {},
beforeMount: function() {},
};
php 相同数据合并单元格,elementUI table合并相同数据的单元格相关推荐
- ElementUI table合并单元格
element-ui Table如何合并单元格 我这里的需求是在懒加载的数据中从 管理员 开始的3列合并, 跟进任务量 开始的3列合并 合并单元格其实是占位,所以清除单元格一定要做 row 为行数据, ...
- element-UI table合并单元格
##建议先看一下官方文档 了解一下表格各个属性的意义: 但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rowspan 的参数需要自己做判断,根据数据的相同行(或 ...
- elementui可编辑单元格_ElementUI table组件实现点击单元格可编辑
最近由于公司开始使用elementUI,但是我发现网上关于elementui的问题很少,只能靠看官方文档解决慢慢摸索,开发的过程中需要用到对表格的单元格进行编辑,百度也找不到,只好自己慢慢研究一下,下 ...
- elementui table expand 修改数据
1.我的设计思路是当点击expand箭头后显示出来内容,然后双击(单击也可以,根据自己想法来)某个区域,然后弹窗进行数据修改,然后双向绑定进行数据渲染,点击保存按钮后数据传输到后台进行数据修改 2.看 ...
- 【MySQL】B-Tree 索引和数据的碎片 以及 Alert Table 会触发数据整理？
1.概述 B-Tree索引可能会碎片化,这会降低查询的效率.碎片化的索引可能会以很差或者无序的方式存储在磁盘上. 根据设计,B-Tree需要随机磁盘访问才能定位到叶子页,所以随机访问是不可避免的.然而 ...
- mysql导入数据提前修改字段_复习MySQL③导入数据、检查及修改
导入数据: 用insert into语句为表插入数据: - insert into 表名(字段1,字段2,-) values -- 导入外部文本文件: - 导入外部txt文件(导入CSV文件分隔符为' ...
- elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
1.将show-summary设置为true就会在表格尾部展示合计行. <el-table:data="tableData"id="tableData"s ...
- ElementUI table 单元格编辑合并
我的需求: 看公司的低代码平台有使用这种方式,所以想研究研究,后期项目里使用. 我需要解决的问题: 如何通过数据对ElementUI的表格组件中单元格的编辑功能进行处理,输入框和表格样式如何切换 表格 ...
- elementui Table组件单元格合并功能剖析
说在前面 近期项目开发过程中用到了单元格合并的功能,在研究官网的介绍时其实不是很了解,好在给的有demo可以参考,如果需求是直接合并某一列,可能就不会有后面的故事了,恰好需求有点变化,如图所示:比如要 ...
最新文章
- koa-grace:一个基于koa的node多应用MVC框架
- JAVA字符串格式化-String.format()的使用
- 客观指标VS主观质量：拨开遮挡高清视频技术的迷雾
- minecraft正版整合包服务器,我的世界1.7.2基佬整合包
- 今天 ,给大家变个魔术!!!
- airflow 進行後端大數據中ETL處理(草稿)
- php无刷新跳转,用#号实现web页面的无刷新跳转
- java中的split使用的是正则表达式
- Lucene就是这么简单
- html期末作品,走完HTML和CSS，进军期末
- Minimum Window Substring @LeetCode
- 大腾讯的第一个开源项目「Tinker」
- 甘肃刘家峡赤壁“结”出多彩冰瀑
- android手机分辨率
- javaScript实现抽奖大转盘（一）
- ALTER TABLE causes auto_increment resequencing, resulting in duplicate entry ’1′ for key
- 负反馈的类型及判定判别方法 及其优点
- 联接新机遇，跨界赢未来，OFweek 2017中国物联网大会圆满落幕
- CSR86XX ROM版 操作EEPROM，FLASH的操作流程
- CSS3教程:Responsive框架常见的Media Queries片段