element ui 动态三级表头 动态数据
表头
[
{
"id": null,
"name": "时间",
"colName": null,
"parentId": null,
"firstColumn": 0,
"lastColumn": 0,
"firstRow": 0,
"lastRow": 2,
"deep": 1,
"children": []
},
{
"id": null,
"name": "合计",
"colName": null,
"parentId": null,
"firstColumn": 1,
"lastColumn": 5,
"firstRow": 0,
"lastRow": 0,
"deep": 3,
"children": [
{
"id": null,
"name": "采水量",
"colName": null,
"parentId": null,
"firstColumn": 1,
"lastColumn": 1,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
},
{
"id": null,
"name": "供水量",
"colName": null,
"parentId": null,
"firstColumn": 2,
"lastColumn": 4,
"firstRow": 1,
"lastRow": 1,
"deep": 3,
"children": [
{
"id": null,
"name": "直供",
"colName": null,
"parentId": null,
"firstColumn": 2,
"lastColumn": 2,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "水厂",
"colName": null,
"parentId": null,
"firstColumn": 3,
"lastColumn": 3,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "合计",
"colName": null,
"parentId": null,
"firstColumn": 4,
"lastColumn": 4,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
}
]
},
{
"id": null,
"name": "电耗",
"colName": null,
"parentId": null,
"firstColumn": 5,
"lastColumn": 5,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
}
]
},
{
"id": "1451883476180803584",
"name": "北水厂",
"colName": null,
"parentId": null,
"firstColumn": 6,
"lastColumn": 10,
"firstRow": 0,
"lastRow": 0,
"deep": 3,
"children": [
{
"id": null,
"name": "采水量",
"colName": null,
"parentId": null,
"firstColumn": 6,
"lastColumn": 6,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
},
{
"id": null,
"name": "供水量",
"colName": null,
"parentId": null,
"firstColumn": 7,
"lastColumn": 9,
"firstRow": 1,
"lastRow": 1,
"deep": 3,
"children": [
{
"id": null,
"name": "直供",
"colName": null,
"parentId": null,
"firstColumn": 7,
"lastColumn": 7,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "水厂",
"colName": null,
"parentId": null,
"firstColumn": 8,
"lastColumn": 8,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "合计",
"colName": null,
"parentId": null,
"firstColumn": 9,
"lastColumn": 9,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
}
]
},
{
"id": null,
"name": "电耗",
"colName": null,
"parentId": null,
"firstColumn": 10,
"lastColumn": 10,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
}
]
},
{
"id": "1451883512352481280",
"name": "高新水厂",
"colName": null,
"parentId": null,
"firstColumn": 11,
"lastColumn": 15,
"firstRow": 0,
"lastRow": 0,
"deep": 3,
"children": [
{
"id": null,
"name": "采水量",
"colName": null,
"parentId": null,
"firstColumn": 11,
"lastColumn": 11,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
},
{
"id": null,
"name": "供水量",
"colName": null,
"parentId": null,
"firstColumn": 12,
"lastColumn": 14,
"firstRow": 1,
"lastRow": 1,
"deep": 3,
"children": [
{
"id": null,
"name": "直供",
"colName": null,
"parentId": null,
"firstColumn": 12,
"lastColumn": 12,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "水厂",
"colName": null,
"parentId": null,
"firstColumn": 13,
"lastColumn": 13,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "合计",
"colName": null,
"parentId": null,
"firstColumn": 14,
"lastColumn": 14,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
}
]
},
{
"id": null,
"name": "电耗",
"colName": null,
"parentId": null,
"firstColumn": 15,
"lastColumn": 15,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
}
]
},
{
"id": "1451883551590195200",
"name": "南水厂",
"colName": null,
"parentId": null,
"firstColumn": 16,
"lastColumn": 20,
"firstRow": 0,
"lastRow": 0,
"deep": 3,
"children": [
{
"id": null,
"name": "采水量",
"colName": null,
"parentId": null,
"firstColumn": 16,
"lastColumn": 16,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
},
{
"id": null,
"name": "供水量",
"colName": null,
"parentId": null,
"firstColumn": 17,
"lastColumn": 19,
"firstRow": 1,
"lastRow": 1,
"deep": 3,
"children": [
{
"id": null,
"name": "直供",
"colName": null,
"parentId": null,
"firstColumn": 17,
"lastColumn": 17,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "水厂",
"colName": null,
"parentId": null,
"firstColumn": 18,
"lastColumn": 18,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "合计",
"colName": null,
"parentId": null,
"firstColumn": 19,
"lastColumn": 19,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
}
]
},
{
"id": null,
"name": "电耗",
"colName": null,
"parentId": null,
"firstColumn": 20,
"lastColumn": 20,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
}
]
},
{
"id": "1451883594665697280",
"name": "太白湖水厂",
"colName": null,
"parentId": null,
"firstColumn": 21,
"lastColumn": 25,
"firstRow": 0,
"lastRow": 0,
"deep": 3,
"children": [
{
"id": null,
"name": "采水量",
"colName": null,
"parentId": null,
"firstColumn": 21,
"lastColumn": 21,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
},
{
"id": null,
"name": "供水量",
"colName": null,
"parentId": null,
"firstColumn": 22,
"lastColumn": 24,
"firstRow": 1,
"lastRow": 1,
"deep": 3,
"children": [
{
"id": null,
"name": "直供",
"colName": null,
"parentId": null,
"firstColumn": 22,
"lastColumn": 22,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "水厂",
"colName": null,
"parentId": null,
"firstColumn": 23,
"lastColumn": 23,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "合计",
"colName": null,
"parentId": null,
"firstColumn": 24,
"lastColumn": 24,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
}
]
},
{
"id": null,
"name": "电耗",
"colName": null,
"parentId": null,
"firstColumn": 25,
"lastColumn": 25,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
}
]
},
{
"id": "1451883634234761216",
"name": "西水厂",
"colName": null,
"parentId": null,
"firstColumn": 26,
"lastColumn": 30,
"firstRow": 0,
"lastRow": 0,
"deep": 3,
"children": [
{
"id": null,
"name": "采水量",
"colName": null,
"parentId": null,
"firstColumn": 26,
"lastColumn": 26,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
},
{
"id": null,
"name": "供水量",
"colName": null,
"parentId": null,
"firstColumn": 27,
"lastColumn": 29,
"firstRow": 1,
"lastRow": 1,
"deep": 3,
"children": [
{
"id": null,
"name": "直供",
"colName": null,
"parentId": null,
"firstColumn": 27,
"lastColumn": 27,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "水厂",
"colName": null,
"parentId": null,
"firstColumn": 28,
"lastColumn": 28,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
},
{
"id": null,
"name": "合计",
"colName": null,
"parentId": null,
"firstColumn": 29,
"lastColumn": 29,
"firstRow": 2,
"lastRow": 2,
"deep": 3,
"children": []
}
]
},
{
"id": null,
"name": "电耗",
"colName": null,
"parentId": null,
"firstColumn": 30,
"lastColumn": 30,
"firstRow": 1,
"lastRow": 2,
"deep": 2,
"children": []
}
]
}
] |
数据元素
[ [ "2021-11-29 20:00:00", 7234, 0, 7507, 7507, 1.638, 110, 0, 1665, 1665, 0.127, 2935, 0, 2363, 2363, 0.523, 0, 0, 215, 215, 0, 1242, 0, 1534, 1534, 0.361, 2947, 0, 1730, 1730, 0.627 ]] |
<template>
<el-table
:data="tableData"
style="width: 100%"
class="danjing-table-container"
:header-cell-style="{ background: '#EBEDF6' }"
:row-style="rowStyle"
>
<template v-for="item in tableHeaderData">
<!--第一层-->
<el-table-column :label="item.name" :key="item.id">
<template slot-scope="scope">
<span v-if="item.columnIndex >= 0">
{{ scope.row[item.columnIndex] }}
</span>
</template>
<!--第二层-->
<template v-for="itemChild in item.children">
<el-table-column
:label="itemChild.name"
align="center"
:key="itemChild.id"
>
<template slot-scope="scope2">
<span v-if="itemChild.columnIndex >= 0">
{{ scope2.row[itemChild.columnIndex] }}
</span>
</template>
<!--第三层开始-->
<template v-for="grandson in itemChild.children">
<el-table-column
:label="grandson.name"
align="center"
:key="grandson.id"
>
<template slot-scope="scope3">
<span v-if="grandson.columnIndex >= 0">
{{ scope3.row[grandson.columnIndex] }}
</span>
</template>
</el-table-column>
</template>
<!--第三层结束-->
</el-table-column>
</template>
<!--第二层结束-->
</el-table-column>
</template>
<!--第一层结束-->
</el-table>
</template>
<script>
import { getChildrenIndex } from "@/utils/index";
export default {
props: {
tableHeader: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
},
data() {
return {
startTime: "",
endTime: "",
};
},
created() {},
methods: {
rowStyle({ row, rowIndex }) {
if (
row[0] === "月累计" ||
row[0] === "月日平均" ||
row[0] === "年累计" ||
row[0] === "年日平均"
) {
return { backgroundColor: "#F4F5F8" };
} else {
return "";
}
},
},
computed: {
tableHeaderData() {
return getChildrenIndex(this.tableHeader, true);
},
},
};
</script> |
getChildrenIndex函数 递归修改某个字段
let columnIndex = 0
export function getChildrenIndex(arr, isFirst) {
if (isFirst) {
columnIndex = 0
}
var newArr = []
for (var item = 0; item < arr.length; item++) {
if (!arr[item].children || arr[item].children.length == 0) {
arr[item]['columnIndex'] = columnIndex
columnIndex++
} else {
arr[item]['columnIndex'] = -1
}
newArr.push(arr[item])
if (arr[item].children) {
newArr[item].children = getChildrenIndex(arr[item].children, false)
}
}
return newArr
} |