element-ui表格el-table动态合并单元格(合并⾏和列)以及给表头添加斜线效果图
实现功能点
1.⾏的合并
2.列的合并
3.给表头添加斜线
4.动态⽣成列
具体实现
html部分
<template>
<!-- 关于表格的操作 -->
<div class="main">
<!-- ⾏的合并列的合并表头添加斜线 -->
<el-table v-loading="loading":data="content":header-cell-:span-method="objectSpanMethod"max-height="600"border> <el-table-column label="bjzh"align="right"width="150">
<el-table-column label="lg"align="center"width="480">
<el-table-column prop="code"align="center"width="80"/>
<el-table-column prop="bh"align="center"width="80"/>
<el-table-column prop="xh"align="center"width="80"/>
<el-table-column prop="model"align="center"width="80"/>
<el-table-column prop="cdm"align="center"width="80"/>
<el-table-column prop="cd"align="center"width="80"/>
</el-table-column>
</el-table-column>
<!-- 不固定列的展⽰ -->
<el-table-column v-for="(item,index) in title":key="index":label="String()":prop="'zh'+(index+1)"/>
</el-table>
</div>
</template>
js部分
<script>
export default{
data(){
return{
loading:false,// 加载中
title:[1,2,3,4,5,6,7,8,9,10],
// 制造的假数据
content:
[
code:"wlgzcd", model:null,
xh:null,
zh1:45,
zh2:40,
zh3:40,
zh4:35,
zh5:30,
zh6:25,
zh7:25,
zh8:25,
zh9:25,
zh10:20,
},
{
bh:null,
cd:null,
cdm:null,
code:"nlgzcd", model:null,
xh:null,
zh1:25,
zh2:25,
zh3:20,
zh4:20,
zh5:20,
zh6:20,
zh7:15,
zh8:10,element表格横向滚动条
zh9:5,
zh10:5,
},
{
bh:2,
cd:4,
cdm:"length", code:"wlgj", model:"B",
xh:"abc",
zh1:"11",
zh2:"12",
zh3:"13",
zh4:"14",
zh5:"15",
zh6:"16",
zh7:"17",
zh8:"18",
zh9:"19",
zh10:"20"
},
{
bh:3,
cd:5,
cdm:"length", code:"wlgj", model:"C",
xh:"abc",
zh1:"21",
zh2:"22",
zh3:"23",
zh9:"29",
zh10:"30"
},
{
bh:1,
cd:2,
cdm:"length",
code:"nlgj",
model:"E",
xh:"abc",
zh1:"101",
zh2:"102",
zh3:"103",
zh4:"104",
zh5:"105",
zh6:"106",
zh7:"107",
zh8:"108",
zh9:"109",
zh10:"110"
},
{
bh:2,
cd:3,
cdm:"length",
code:"nlgj",
model:"F",
xh:"abc",
zh1:"111",
zh2:"112",
zh3:"113",
zh4:"114",
zh5:"115",
zh6:"116",
zh7:"117",
zh8:"118",
zh9:"119",
zh10:"120"
},
{
bh:3,
cd:4,
cdm:"length",
code:"nlgj",
model:"G",
xh:"abc",
zh1:"121",
zh2:"122",
zh3:"123",
zh4:"124",
zh5:"125",
zh6:"126",
zh7:"127",
zh8:"128",
zh9:"129",
zh10:"130"
}
],
/
/ 存放需要合并的单元格
},
created(){
// 调⽤计算需要合并的⾏
},
methods:{
getSpanArr(data){
Array =[]
let concatOne =0
data.forEach((item, index)=>{
if(index ===0){
Array.push(1)
}else{
// 判断依据
// 前⼀个的code和后⼀个的code相同,则进⾏⾏的合并
de === data[index -1].code){
Array[concatOne]+=1
Array.push(0)
}else{
Array.push(1)
concatOne = index
}
}
})
},
// 注意:横向合并列纵向合并⾏
objectSpanMethod(
{
row,
column,
rowIndex,
columnIndex
}){
if(columnIndex ===0){
de ==='wlgzcd'|| de ==='nlgzcd'){
return{
rowspan:1,
colspan:6
}
}else{
const _row =Array[rowIndex]
const _col = _row ?1:0
return{
rowspan: _row,
colspan: _col
}
}
}
// 要将其余的列给清除,否则其还会占⽤空间
if((de ==='wlgzcd'|| de ==='nlgzcd')&&(columnIndex ===1|| columnIndex ===2|| columnIndex ===3|| columnIndex ===4|| columnIn dex ===5)){// 1和2列被合并,不清除的话,则后⾯的单元格都会错位
return{
rowspan:0,
colspan:0
}
}
},
// 第⼆⾏表头的隐藏
headMerge({
row,
if(rowIndex ===2){
return{
display:'none'
}
}
}
}
}
</script>
样式部分
<style lang="scss">
// 表头添加斜线部分的样式
// scss的混合
@mixin common(){
text-align: right;
border-bottom: none;
}
// 三个表格中部分需要更改的公共样式
@mixin common-part(){
content:"";
position: absolute;
width: 1px;
background-color: grey;
opacity: 0.3;
display: block;
}
.main{
/
*去掉下边框 */
.el-table th.is-right,
.el-table td.is-right{
@include common();
}
/* 斜线上⽅ bjzh 部分 */
.el-table thead.is-group tr:first-of-type th:first-of-type:before{
@include common-part();
height: 17.083rem;/*这⾥需要⾃⼰调整,根据td的宽度和⾼度*/ top: 0;
left: 0;
transform:rotate(-78.3deg);/*这⾥需要⾃⼰调整,根据线的位置*/ transform-origin: top;
}
/* 斜线下⽅ lg 部分 */
.el-table thead.is-group tr:nth-of-type(2) th:first-of-type:before{
@include common-part();
height: 17.083rem;/*这⾥需要⾃⼰调整,根据td的宽度和⾼度*/ bottom: 0;
right: 0;
transform:rotate(-79.3deg);/*这⾥需要⾃⼰调整,根据线的位置*/ transform-origin: bottom;/*旋转的起点 */
}
}
</style>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论