vue表格合并行的一个实例
一、element控件实现
在平常的应用中,需要用到合并单元格的操作,在Excel中,这种操作很好实现,但在实际项目中,常常需要借助element控件来实现。
下面是element中的一个实例:
实现的代码如下:
<template>
<div>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table> <el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1(元)">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3(元)">
</el-table-column>
</el-table>
</div>
</template> <script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
}, objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
二、原生方法实现
但是,这种局限性很大,要是需要合并的单元格和实例中的不匹配,那就不行了。比如说实际需求是下面的这种形式的表格:
开始用element控件发现实现不了,然后最后用原生方法实现的,关键代码如下:
<table>
<thead>
<th>数据类型</th>
<th>名称</th>
<th></th>
<th></th>
</thead>
<tbody>
<template v-for="(item,index) in tableData">
<tr :key="index">
<td :rowspan="item.rowSpanData.length">{{item.rowSpanName}}</td>
<td >{{item.rowSpanData[0].value01}}</td>
<td >{{item.rowSpanData[0].value02}}</td>
<td >{{item.rowSpanData[0].value03}}</td>
</tr>
<tr v-for="(ele,inx) in item.rowSpanData.length-1" :key="index+'-'+inx">
<td>{{item.rowSpanData[ele].value01}}</td>
<td>{{item.rowSpanData[ele].value02}}</td>
<td>{{item.rowSpanData[ele].value03}}</td>
</tr>
</template>
</tbody>
</table>
tableData: [
{
rowSpanName: "基础数据",
rowSpanData: [
{
value01: "钻井层位()",
value02: "",
value03: ""
},
{
value01: "上层套管尺寸(in)",
value02: "",
value03: ""
},
{
value01: "上层套管下深(m)",
value02: "",
value03: ""
},
{
value01: "本层钻头尺寸(in)",
value02: "7.5",
value03: ""
},
{
value01: "本层井深(m)",
value02: "5950",
value03: ""
},
{
value01: "本层井底部垂深(m)",
value02: "",
value03: ""
},
{
value01: "本层套管尺寸(in)",
value02: "4",
value03: ""
},
{
value01: "本层套管下深(m)",
value02: "5948.6",
value03: ""
},
{
value01: "浮箍下深(m)",
value02: "5928.6",
value03: ""
},
{
value01: "球座/阻流环下深(m)",
value02: "5928.6",
value03: ""
},
{
value01: "分级箍顶深(m)",
value02: "",
value03: ""
},
{
value01: "尾管挂顶深(m)",
value02: "3050",
value03: ""
},
]
},
{
rowSpanName: "地质分层",
rowSpanData: [
{
value01: "层位()",
value02: "",
value03: ""
},
{
value01: "底深(m)",
value02: "",
value03: ""
},
{
value01: "主要岩性描述()",
value02: "",
value03: ""
}
]
},
{
rowSpanName: "其他",
rowSpanData: [
{
value01: "目的层1顶深(m)",
value02: "",
value03: ""
},
{
value01: "目的层1顶深TVD(m)",
value02: "",
value03: ""
}
]
}
],
<style scoped>
table {
width: 600px;
border: 1px solid #ccc;
border-collapse: collapse;
}
thead th{
text-align: left;
background-color: #fafafa;
}
th,td {
padding-left: 20px;
border: 1px solid #e9eaec;
line-height: 30px;
}
</style>
实现的效果如下:
以上就是实际需求中的一个例子,element控件应该也能实现第二种多行合并的表格,后面可以深入研究一下。
vue表格合并行的一个实例的更多相关文章
- Java利用poi生成word(包含插入图片,动态表格,行合并)
转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...
- Python将多个excel表格合并为一个表格
Python将多个excel表格合并为一个表格 生活中经常会碰到多个excel表格汇总成一个表格的情况,比如你发放了一份表格让班级所有同学填写,而你负责将大家的结果合并成一个.诸如此类的问题有很多.除 ...
- vue 学前班002(创建一个实例)
创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...
- vue+element项目中动态表格合并
需求:elementui里的table虽然有合并函数(:span-method),单基本都是设置固定值合并.现在有一个树型结构的数据,要求我们将里面的某个list和其他属性一起展开展示,并且list中 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- QTableWidget表格合并若干问题及解决方法
Qt提供 QTableWidget作为表格的类以实现表格的基本功能,表格中所装载的每一个单元格由类QTableWidgetItem提供.这是基于表格实现 Qt提供的一个基础类,若想实现定制表格和单元格 ...
- Hadoop HDFS的shell(命令行客户端)操作实例
HDFS的shell(命令行客户端)操作实例 3.2 常用命令参数介绍 -help 功能:输出这个命令参数手册 -ls 功能:显示目录信息 示例: hadoop fs ...
- element-ui 使用span-method表格合并后hover样式的处理
在使用element表格合并后,发现鼠标只有移入第一个合并行时,合并的部分会高亮,移入其他行,不会高亮,这样效果看起来不是很好.查看了文档也没有直接的解决方法,就通过现有的方法处理了一下,解决了hov ...
- elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门 但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
随机推荐
- ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy
场景 搭建ElementUI前端项目后提示: Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy ...
- HTTP Error 500.19 - Internal Server Error 无法读取配置文件
将Code移动文件夹就报以下错误,http error 500.19 - internal server error. 项目文件下.vs=>config=>applicationhost. ...
- 验证apk签名方式(V1 || V2)
进入SDK\build-tools\28.0.2目录(或者其他版本),该目录有apksigner.bar脚本,我们可以利用它来验证. 在此目录打开命令行. 命令为:apksigner verify - ...
- js设置定时执行
具体语法参考:https://www.runoob.com/jsref/met-win-setinterval.html var timer = window.setInterval(function ...
- 数据库死锁的问题,Deadlock found when trying to get lock; try restarting transaction at Query.formatError
场景: 应用刚上线排除大批量请求的问题 线上多次出现的Deadlock found when trying to get lock错误 代码: async batchUpdate(skus, { tr ...
- 【转载】解决:'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
注:网上能搜到的常规解决办法我都试了不好用,这个是最快的解决办法. 以下是转载的解决办法: ****************************************************** ...
- nginx 配置实例-反向代理
反向代理实例一 虚拟机IP:192.168.116.129实现效果:使用 nginx 反向代理,访问 www.123.com 直接跳转到 虚拟机的192.168.116.129:8080 实验代码 ...
- 千万级数据迁移工具DataX实践和geom类型扩展
## DataX快速入门参考 > 官方https://github.com/alibaba/DataX/blob/master/userGuid.md ## 环境要求 > Linux JD ...
- go 杂项笔记
*** 使用go build编译该程序,注意这里需要指定 -gcflags "-N -l" 关闭编译器优化,否则编译器可能把对sum函数的调用优化掉. bobo@ubuntu:~/ ...
- Codeforces Round #607 (Div. 1)
A. Cut and Paste 题解 在计算答案的时候,我们发现只需要知道这个字符串前\(l\) 个具体是啥就行了.所以对于每一组询问,我们暴力把这个字符串前\(l\) 的位都算出来,然后剩下的就推 ...