element动态多级表头
概述
循环遍历一级表头再遍历二级表头
代码
<template>
<div style="border-radius: 10px;padding: 15px">
<div class="scll"> {{ companymessage }}</div>
<el-table
:data="ParamList"
border
style="width: 100%">
<div v-for="(i,index) in columndata" :key="i.bigName">
<el-table-column
v-if="index===1"
:key="Math.random()"
label="编号"
align="center"
type="index"
width="50">
</el-table-column>
<el-table-column
v-if="index===1"
:key="Math.random()"
label="名称"
align="center"
prop="stationName"
width="180">
</el-table-column>
<el-table-column
:prop="i.nameProp"
:key="Math.random()"
:label="i.bigName"
align="center"
>
<div v-for="etams in i.value">
<el-table-column
:prop="etams.nameProp"
:key="Math.random()"
align="center"
:label="etams.subtitleName"
>
<template slot-scope="scope">
<div class="textA">
<el-tooltip placement="top">
<div slot="content"> {{ scope.row[etams.nameProp] | rounding }}</div>
{{ scope.row[etams.nameProp] | rounding }}
</el-tooltip>
</div>
</template>
<div v-for="etam in etams.value" v-if="'value' in etams">
<el-table-column
v-show="false"
:key="Math.random()"
:label="etam.smallName.slice(etam.smallName.length-3,etam.smallName.length-1)"
:prop="etam.nameProp"
align="center"
>
<template slot-scope="scope">
<span>
{{ scope.row[etam.nameProp] | rounding }}</span>
</template>
</el-table-column>
</div>
</el-table-column>
</div>
</el-table-column>
</div>
</el-table>
</div>
</template>
<script>
export default {
name: "Sheetydb2021-3-24",
filters: {
rounding(value) {
// console.log(typeof (value))
// console.log(value)
if (value === undefined || value === " ") return ""
if (typeof (value) === 'number') {
// console.log(value)
return parseFloat(value).toFixed(2)
} else
return value
}
},
props: {
paramData: {
type: Array,
required: true
},
columndata: {
type: Array,
required: true
},
companymessage: {
type: String,
required: false
}
},
data() {
return {
ParamList: [],
};
},
watch: {
paramData: {
deep: true,
immediate: true,
handler(val) {
this.ParamList = val;
}
},
columndata: {
deep: true,
immediate: true,
handler(val) {
this.columndata = val;
}
}
},
mounted() {
},
beforeDestroy() {
if (!this.ParamList) {
return;
}
this.ParamList = null;
},
methods: {
cutZero(old) {
// 拷贝一份 返回去掉零的新串
let newstr = old;
// 循环变量 小数部分长度
let leng = old.length - old.indexOf(".") - 1
// 判断是否有效数
if (old.indexOf(".") > -1) {
// 循环小数部分
for (let i = leng; i > 0; i--) {
// 如果newstr末尾有0
if (newstr.lastIndexOf("0") > -1 && newstr.substr(newstr.length - 1, 1) == 0) {
let k = newstr.lastIndexOf("0");
// 如果小数点后只有一个0 去掉小数点
if (newstr.charAt(k - 1) == ".") {
return newstr.substring(0, k - 1);
} else {
// 否则 去掉一个0
newstr = newstr.substring(0, k);
}
} else {
// 如果末尾没有0
return newstr;
}
}
}
return old;
}
},
};
</script>
<style>
</style>
<style lang="scss" scoped>
.textA{
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.scll {
position: relative;
//background: url(../img/tab_15.gif) repeat-x left;
background-color: #BCF4EC;
text-align: center;
vertical-align: middle;
text-indent: 15px;
}
</style>