Element table各种合并单元格_element两个表格共用一个表头_丸子吖嘿的博客-程序员秘密
一、表头合并列
这是官网合并列效果，可是，并不适用于只有一级表头的，官方文档并未发现直接实现属性
一级表头合并实现方式：给table加 header-cell-style，代码如下
<el-table :data="tableData" border fit :header-cell-style="discountHeaderStyle">
<el-table-column label="操作" align="center">
<el-table-column align="center" width="160" fixed="right">
<template slot-scope="scope">
<div>
<el-button size="mini" type="success" plain>查看</el-button>
<el-button type="primary" size="mini" plain>回复</el-button>
</div>
</template>
</el-table-column>
<el-table-column align="center" width="110" fixed="right">
<template slot-scope="scope">
<div>
<el-button type="warning" size="mini" plain>取消订单</el-button>
</div>
</template>
</el-table-column>
</el-table-column>
</el-table>
js
discountHeaderStyle({
row, column, rowIndex, columnIndex }) {
if (rowIndex === 1) {
//隐藏另外领两个头部单元格
return {
display: 'none' }
}
},
下面是效果
注意
这样会有个问题，本来最后两列是加了 fixed=“right” 属性固定在右侧的，当合并头部时，这个属性不起作用，如果加在父级el-table-column上，最后两列直接乱掉……不知道怎么兼容，所以我把定位给去了
二、表内容合并行
<el-table
:data="tableData"
border
fit
:span-method="objectSpanMethod"
style="width: 100%"
>...</el-table>
//加载列表
initList() {
//此处axios请求数据省略
this.tableData = data.list
this.getSpanArr(this.tableData)
}
//合并单元格
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 0||columnIndex===14) {
// 对第一列进行合并
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
//筛选需要合并单元格的数据
getSpanArr(data) {
this.spanArr = [] // 避免表格错乱！
data.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
this.position = 0
} else {
if (data[index].orderId === data[index - 1].orderId) {
// 这里是要合并行
this.spanArr[this.position] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.position = index
}
}
})
},
效果如下
智能推荐
腾讯云centos服务器上安装hadoop踩坑记_梦小冷的博客-程序员秘密
首先需要下载hadoop、jdk1.8在本地下载好jdk1.8https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.htmlhadoop的安装包:链接：https://pan.baidu.com/s/1LkTMeLl0qRsuvSZJAUpzUA提取码：tkmr通过xftp上传的服务...
[软件注册]Sublime 3 激活/注册码(key)_三原色刀客的博客-程序员秘密
偶然发现了一种sublime激活方式.使用的sublime3.1.1版本,亲试有效.Step1 : 配置 host文件(推荐使用 switchhost软件,可以快速变更host)127.0.0.1 www.sublimetext.com127.0.0.1 license.sublimehq.comStep2 : 在sublime –&gt; help –...
项目的错误总结_一个想打代码的yebadi_的博客-程序员秘密
1. 首先是关于静态资源的问题默认是将css,js放在static中，HTML放在templates下的，在写拦截器的时候记得将静态资源放开，如果不保险可以全部写上。关于拦截器的书写，实现HandlerInterceptor接口，其实的使用pre方法// 这里是拦截器，拦截登陆的public class LoginHanderIntercepter implements HandlerInterceptor { @Override public boolean preHandle(H
VC++中API串口通信详解_鲸鱼的尾巴的博客-程序员秘密
1、API描述 在WIN32 API中，串口使用文件方式进行访问，其操作的API基本上与文件操作的API一致。 打开串口 Win32 中用于打开串口的API 函数为CreateFile，其原型为：HANDLE CreateFile ( LPCTSTR lpFileName,
EOS区块链的通信模型_eos通信模式_芒果汁的博客-程序员秘密
今天我们推出了一个全新的系列，Hacking the Blockchain！它适用于刚刚开始开发EOSIO的所有开发人员。它也适用于所有EOS Blockchain爱好者，他们不是完全技术性的，但想要搞清楚该技术的工作原理。在每篇文章中，我们将探讨区块链的特定部分。我们从EOS通信模型开始，希望能坚持下去！今天，我们将探索EOS通信模型。我们将深入探讨不同类型的沟通模式和行动。对于desser...
接口测试 注意点 参考网站_强大的石头的博客-程序员秘密
接口功能测试要点：http://www.jianshu.com/p/514c7480cbc7 简介：接口测试的分类、工具和接口测试应该测什么：http://blog.csdn.net/quiet_girl/article/details/50577641接口测试关注点、常用工具：http://blog.csdn.net/sinat_16640839/article/details/51338865
随便推点
B/S端开发工具DevExtreme Angular控件 - 常见功能_dxbutton_界面开发小八哥的博客-程序员秘密
DevExtreme v21.1.5最新版下载服务器端渲染服务器端渲染 (SSR) 在服务器上生成静态页面来减少应用程序的加载时间。SSR 仅用于 Angular Universal 应用程序，但对于DevExtreme组件，Angular Universal 和普通 Angular 应用程序没有区别。您可以通过两种方式获得 Angular Universal 应用程序：运行以下命令将 Universal 模块添加到普通的 Angular 应用程序中：ng generate uni..
校园网内端口扫描教程——本文献给无聊的计算机系大学生们_等你回信的博客-程序员秘密
想不想看看你们校园里里有哪些不为人知的网站或是找找开放了一些有趣端口的服务器？首先我们需要在Linux下安装nmap（Nmap是一款网络扫描和主机检测的非常有用的工具），Ubuntu 可使用sudo apt-get install nmap安装，这个软件也有windows版本的，大家可以自行百度，下面只介绍Linux下的操作，这个应该不是什么难题。1.安装好工具，现在我们要找到自己的ip地址。...
腾讯2015面经_菜鸟夫人的历练的博客-程序员秘密
就在两个小时前，结束了腾讯的二面，面试完没多久就从wechat上查到二面被刷！心里久久不能平静，又反复查了好几遍，确认，嗯，的确无缘了。一切那么的近，却又转瞬间化为乌有了。原谅我是一个文艺的程序员，不喜勿喷。应班花和标哥的面经要求，写在这里也算是作为自己的一个总结和回顾。BAT是计算机及软件同学的理想入职公司，而鹅场在广深是更受青睐的。本人985本科一枚
图像反色 cvNot(img, pDstImg);_Hustudent20080101的博客-程序员秘密
//////////////////////////////////////////////////////////////////////////// hello-world.cpp//// 该程序从文件中读入一幅图像，将之反色，然后显示出来. //////////////////////////////////////////////////////////////////////
PyQt5基本控件详解之QSpinBox(十)_李肖遥的博客-程序员秘密
QSpinBox前言QSPINBox是一个计数器控件，允许用户选择一个整数值通过单击向上向下或者按键盘上的上下键来增加减少当前显示的值，当然用户也可以输入值在默认情况下，QSpinBox的取值范围是（0-99），每次改变的步长是1QSpinBox类和QDoubleSpinbox类均派生自QAbstractSpinBox类，QSpinBox用于处理整数值，QDoubleSpinBox则用于处理浮点数值，他们之间的区别就是处理数据的类型不同，其他功能基本相同，QDoubleSpinBox的默认精度是两
kafka笔记-基本介绍_飞飞羽毛球的博客-程序员秘密
1. kafka是什么kafka是一个多分区、多副本且基于zookeeper协调的分布式消息系统2. kafka的优点高吞吐、可持久化、可水平扩展、支持流数据处理等3. kafka基本组成及概念 kafka体系架构主要包括producer(生产者)、consumer(消费者)、broker(服务代理节点)、一个zookeeper集群 producer(生产者...