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 相关文章推荐
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue特效之翻牌动画
Apr 20 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python基础教程项目四之新闻聚合
2018/04/02 Python
python定位xpath 节点位置的方法
2019/08/27 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
do you have any Best Practice for testing
2016/06/04 面试题
平民服装店创业计划书
2014/01/17 职场文书
大学班级学风建设方案
2014/05/01 职场文书
煤矿安全生产标语
2014/06/06 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
老公出轨后的保证书
2015/05/08 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书