<template>
|
<!-- 修改表头 -->
|
<el-col>
|
<el-row justify="end" class="btn-group">
|
<el-popover placement="bottom" :width="400" trigger="click">
|
<template #reference>
|
<!-- <el-button type="primary">表头修改</el-button> -->
|
</template>
|
<!-- 列出表头的树状结构 -->
|
<el-tree
|
ref="tree"
|
:props="headTreeProps"
|
:data="tableHeader"
|
node-key="id"
|
show-checkbox
|
:default-checked-keys="defaultCheckedKeys"
|
@check="check"
|
/>
|
</el-popover>
|
<!-- <el-button type="primary" @click="openChart">图表展示</el-button> -->
|
</el-row>
|
</el-col>
|
|
<el-table
|
:data="tableData"
|
border
|
:header-cell-style="headerStyle"
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
row-key="id"
|
lazy
|
max-height="60vh"
|
v-loading="loading"
|
ref="tableRef"
|
>
|
<template v-for="item in tableHeader.filter((item) => !item.hidden)">
|
<table-column
|
v-if="item.children && item.children.length"
|
:key="item.id"
|
:coloumn-header="item"
|
></table-column>
|
<el-table-column
|
v-else
|
:key="item.id + 'else'"
|
:label="item.label"
|
:prop="item.prop"
|
align="center"
|
:min-width="item.width ? item.width : '200px'"
|
:sortable="item.sortable == undefined ? false : item.sortable"
|
>
|
<!-- <template #header>
|
{{ item.label }}
|
<el-button type="primary" @click="hidden(item)">隐藏</el-button>
|
</template> -->
|
</el-table-column>
|
</template>
|
</el-table>
|
<el-pagination
|
v-if="pagination"
|
ref="paginationRef"
|
class="el-pagination"
|
v-model:current-page="currentPage"
|
v-model:page-size="pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:background="true"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
/>
|
|
<el-dialog title="图表展示" v-model="chartDialog" destroy-on-close>
|
<CompShowEChart :table-data="tableData" :table-header="tableHeader">
|
</CompShowEChart>
|
</el-dialog>
|
</template>
|
|
<script>
|
import CompShowEChart from './CompShowEChart.vue';
|
import TableColumn from './TableColumn.vue';
|
import tableCol from '../js/tableCol';
|
export default {
|
components: {
|
TableColumn,
|
CompShowEChart
|
},
|
mounted() {
|
// this.onSearch();
|
},
|
watch: {
|
currentPage(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
},
|
pageSize(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
}
|
},
|
computed: {
|
defaultCheckedKeys() {
|
return this.collectLabels(this.tableHeader);
|
}
|
},
|
data() {
|
return {
|
total: 0,
|
currentPage: 1,
|
pageSize: 20,
|
tableData: [],
|
|
chartDialog: false,
|
char1: {},
|
headTreeProps: {
|
children: 'children',
|
label: 'label',
|
disabled: 'noncloseable'
|
}
|
};
|
},
|
props: {
|
// 表格的数据
|
// tableData: {
|
// type: Array,
|
// required: true
|
// },
|
pagination: {
|
type: Boolean,
|
default: false
|
},
|
// 多级表头的数据
|
tableHeader: {
|
type: Array,
|
required: true
|
}
|
},
|
methods: {
|
// @Description: 设置表头样式
|
headerStyle({ row, rowIndex, columnIndex }) {
|
if (row[columnIndex].order != '' && row[columnIndex].order != null) {
|
return { 'background-color': '#F56C6C', 'color': '#000000' };
|
}
|
return {}
|
},
|
// 方法不自动触发，由父组件主动调用获取列表数据
|
onSearch() {
|
this.loading = true;
|
this.$emit(
|
'search',
|
{
|
currentPage: this.currentPage,
|
pageSize: this.pageSize
|
},
|
(res) => {
|
this.tableData = res.data;
|
this.total = res.total ? res.total : 0;
|
this.loading = false;
|
// this.doLayout();
|
}
|
);
|
},
|
doLayout() {
|
this.$refs.tableRef.doLayout();
|
},
|
openChart() {
|
this.chartDialog = true;
|
},
|
check(checkedNode, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
|
checkedNode.hidden = !checkedNode.hidden;
|
this.treeToArray(this.tableHeader).map((item) => {
|
if (item.hidden) {
|
console.log('隐藏', item.id);
|
this.$refs.tree.setCheckedKeys([item.id], false);
|
} else {
|
console.log('显示', item.id);
|
this.$refs.tree.setCheckedKeys([item.id], true);
|
}
|
});
|
},
|
load(tree, treeNode, resolve) {
|
this.$emit('load', tree, treeNode, resolve);
|
},
|
hidden(header) {
|
header.hidden = true;
|
},
|
collectLabels(nodes) {
|
let labels = [];
|
|
function traverseNodes(nodes) {
|
nodes.forEach((node) => {
|
if (!('hidden' in node) || !node.hidden) {
|
labels.push(node.id);
|
}
|
|
// 如果当前节点有子节点，递归调用遍历函数
|
if (node.children && node.children.length > 0) {
|
traverseNodes(node.children);
|
}
|
});
|
}
|
|
traverseNodes(nodes); // 开始递归遍历
|
|
return labels; // 返回收集到的 labels 数组
|
},
|
treeToArray(nodes) {
|
let labels = [];
|
|
function traverseNodes(nodes) {
|
nodes.forEach((node) => {
|
labels.push(node);
|
|
// 如果当前节点有子节点，递归调用遍历函数
|
if (node.children && node.children.length > 0) {
|
traverseNodes(node.children);
|
}
|
});
|
}
|
|
traverseNodes(nodes); // 开始递归遍历
|
|
return labels; // 返回收集到的 labels 数组
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.btns {
|
display: flex;
|
margin: 5px;
|
margin-left: 0px;
|
}
|
.el-pagination {
|
background-color: var(--el-color-white);
|
padding-top: 20px;
|
border-top: 1px solid rgba(0, 0, 0, 0.096);
|
/* margin-top: 2px; */
|
}
|
.btn-group {
|
/* background-color: rgb(32, 127, 211); */
|
white-space: nowrap;
|
}
|
.table-cell-red {
|
background-color: rgb(196, 23, 23);
|
}
|
</style>
|
