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-cli 创建模板项目
Nov 19 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
关于vue-router-link选择样式设置
Apr 30 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中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php 数组元素快速去重
2017/05/05 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
社会实践感言
2014/01/25 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
食品业务员岗位职责
2014/03/18 职场文书
支部书记四风对照材料
2014/08/28 职场文书
五心教育心得体会
2014/09/04 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014年除四害工作总结
2014/12/06 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
Docker官方工具docker-registry案例演示
2022/04/13 Servers