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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 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新手上路(五)
2006/10/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
python进阶教程之异常处理
2014/08/30 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
django表单的Widgets使用详解
2019/07/22 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python表达式的优先级详解
2020/02/18 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
详解python with 上下文管理器
2020/09/02 Python
python Pexpect模块的使用
2020/12/25 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
《猴子种果树》教学反思
2014/04/26 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers