vue element实现表格合并行数据


Posted in Vue.js onNovember 30, 2020

本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下

支持不分页的表格数据,分页的表格数据还有小bug

<template>
 <el-container>
 <el-main>
 <el-table
 :data="tableData"
 border
 style="width: 100%"
 :span-method="objectSpanMethod" //添加这个实现行数据合并
 >
 <el-table-column label="序号" prop="id" align="center"></el-table-column>
  <el-table-column label="名字" prop="screenName" align="center"></el-table-column>
  <el-table-column label="时间1" prop="startTime" align="center"></el-table-column>
  <el-table-column label="时间2" prop="endTime" align="center"></el-table-column>
 </el-table>
 </el-main>
 </el-container>
</template>

<script>
export default {
 name: "Formtableyes",
 data() {
 return {
 //合并行
 spanArr: [], //声明一个数组
 tableData: [
 { id: 1, screenName: "LHC", startTime: "12", endTime: "1231" },
 { id: 1, screenName: "LHC", startTime: "12", endTime: "123" }
 ]
 };
 },
 mounted: function() {
 this.tableDatas();  //加载数据就调用该方法
 },
 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
 };  
 }     
 // if (columnIndex === 2) {   //合并第三列
 // const _row = this.spanArr[rowIndex];
 // const _col = _row > 0 ? 1 : 0;
 // return {
 // rowspan: _row,
 // colspan: _col
 // };
 // }   
 },
 tableDatas() {
 let contactDot = 0;
 this.tableData.forEach((item, index) => {
 item.index = index;
 if (index === 0) {
  this.spanArr.push(1);
 } else {
  if (item.id === this.tableData[index - 1].id) {
  this.spanArr[contactDot] += 1;
  this.spanArr.push(0);
  } else {
  this.spanArr.push(1);
  contactDot = index;
  }
 }
 });
 },
 
 }
};
</script>
<style scoped>
.ptselect {
 width: 100%;
}
</style>

效果如下:

vue element实现表格合并行数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 #Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 #Vue.js
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
You might like
PHP学习之PHP变量
2006/10/09 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
python缩进区别分析
2014/02/15 Python
Python异常处理例题整理
2019/07/07 Python
django admin 添加自定义链接方式
2020/03/11 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
如何利用Python 进行边缘检测
2020/10/14 Python
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
师德师风个人反思
2014/04/28 职场文书
带病坚持工作事迹
2014/05/03 职场文书
伦敦奥运会口号
2014/06/13 职场文书
违纪学生保证书
2015/02/27 职场文书
中学教师读书笔记
2015/07/01 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书