table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格
或者
测试 vue 文件
<template><div><el-table:data="tableData"tooltip-effect="dark"style="width: 100%":span-method="arraySpanMethod"border><el-table-columnprop="name"label="姓名"></el-table-column><el-table-column label="日期"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column><el-table-columnprop="phone"label="电话"show-overflow-tooltip></el-table-column><el-table-columnprop=""label="操作"><template slot-scope="scope"><el-button@click.native.prevent="deleteRow(scope.$index, tableData)"type="text"size="small">移除</el-button></template></el-table-column></el-table></div></template><script>
import axios from 'axios'
export default {data() {return {tableData: [{name: '王小虎 ',date: '2016-05-02',address: '上海市普陀区金沙江路 1511 弄',phone: '123456',}, {name: '王小虎 ',date: '2016-05-02',address: '上海市普陀区金沙江路 1512 弄',phone: '123456'}, {name: '东北虎 ',date: '2016-05-02',address: '上海市普陀区金沙江路 1513 弄',phone: '123456'}, {name: '东北虎 ',date: '2016-05-01',address: '上海市普陀区金沙江路 1514 弄',phone: '1234567'}, {name: '东北虎 ',date: '2016-05-07',address: '上海市普陀区金沙江路 1515 弄',phone: '1234567'}, {name: '东北虎 ',date: '2016-05-07',address: '上海市普陀区金沙江路 1516 弄',phone: '12345673'}, {name: '赔钱虎 ',date: '2016-05-07',address: '上海市普陀区金沙江路 1517 弄',phone: '12345673'}],// 这里是合并需要用到的数据testArr1: [],testArr2: [],testArr3: [],testPosition1: 0,testPosition2: 0,testPosition3: 0,}},created() {this.toQuery() // 模拟 请求 tableData 数据},methods: {toQuery() {// this.tableData = axios 数据this.rowspan(this.testArr1, this.testPosition1, "name");this.rowspan(this.testArr2, this.testPosition2, "phone");this.rowspan(this.testArr3, this.testPosition3, "date");},// 合并行或者是列arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.testArr1[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 3) {const _row = this.testArr2[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 1) {const _row = this.testArr3[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},// 整理数据rowspan(spanArr, position, spanName) {this.tableData.forEach((item, index) => {if (index === 0) {spanArr.push(1);position = 0;} else {if (this.tableData[index][spanName] ===this.tableData[index - 1][spanName]&& // 这里为 图片 和 图二 数据异同点 这里用 name 判断是否同类 (注释则为图二)this.tableData[index].name ===this.tableData[index - 1].name) {spanArr[position] += 1;spanArr.push(0);} else {spanArr.push(1);position = index;}}});},}
}
</script>
有需求的可以直接使用哦
table合并单元格_element ui el-table 合并单元格相关推荐
- element ui分页怎么做_element ui里面table分页,页数从0开始的怎么做?
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
- Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- table合并单元格_制作课程表3——合并单元格
由于浏览器兼容问题,. 以及 很少被使用, 所以我们将课程表依然使用tr.td元素,结合样式实现出前面案例中效果 原来代码: 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课 ...
- JQuery合并table单元格--有限制(table格式需要注意)
JS代码: <scriptsrc="../js/jquery-1.6.1.min.js"type="text/javascript">< ...
- 关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并)
关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并) 首先,关于poi解析表格先阅读一篇他人的博客 使用poi读取word2007(.docx)中的复杂表格 ...
- html合并单元格自动换行,html的table标签用js做合并单元格操作
满意答案 fsrbf 2015.07.24 采纳率:59% 等级:11 已帮助:5794人 为什么要用js呢?table本身就有合并单元格的功能,其实如果你用js也是给table添加对应的样式. ...
- html两个th合并单元格,10、HTML表格(table 、th、tr、td、合并单元格)的简单认识...
1.表格的定义 表格的定义是通过 table 标签来定义的,当然了,如果只是写一个 table 标签,是看不见任何内容的,一个表格是由行和列组成,而在HTML中,行的定义又是由 tr 标签来定义的,列 ...
最新文章
- ImportError: No localization support for language ‘eng’ in python
- [设计模式]设计模式之禅关于接口隔离原则
- 【OS】期末总结复习
- escape in ABAP and JavaScript
- how is Customizing activity launched by ABAP Framework
- css中设置br标签之后的样式_CSS学习
- Python语法糖之:列表解析、集合解析和字典解析
- lnmp下mysql创建新用户授权后登录报错 1045 Access denied for user 'name'@'localhost
- Unit Test单元测试时如何模拟HttpContext
- pcap文件提取后的dataframe,切分前向流与后向流
- android点赞动画仿twritter,【点赞动画仿抖音】Android 自定义view动画--酷炫点赞动画...
- 判断一个字符串的字符是不是唯一
- html资源路径404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
- SQL 数据定义语句(DDL)
- VectorDraw Web JS 9.9 Crack
- Vue 动态加载子组件
- Kylin中cube优化
- PHP服务端 苹果支付(IAP)处理
- 云数据库RDS规格族配置详解
- 干支纪年法简便算法_我国为何放弃黄帝纪年和孔子纪年,转而选择了耶稣诞辰纪年法?...
热门文章
- 顺序容器(1):vector
- C#使用正则表达式检测数字 char 和韩文
- 【UOJ】【34】多项式乘法
- 对java:comp/env的研究(转)
- C# 多线程同步和线程通信
- 在windows下搭建SVN服务器
- [Microsoft][ODBC SQL Server Driver][SQL Server]String or binary data would be truncated.
- dubbo源码1-暴露服务
- 2、Python函数详解(0601)
- 学完之后,有什么证书发吗?要另外收费吗?收费多少? 学员每天的上课时间是怎样安排的?...