vxe-vxe-colgroup后端返回数据 对数据进行处理 动态合并分组表头(v-if控制表格渲染(数据请求完成后渲染))
1.html vxe-colgroup循环合并数据;v-if控制表格渲染(数据请求完成后渲染)
<template><vxe-table v-if="isTableReady" :data="tableData"><vxe-colgroup title="基本信息"><template v-for="(column, index) in dynamicColumns"><vxe-column:key="index":field="column.field":title="column.title":width="column.width"></vxe-column></template></vxe-colgroup><vxe-colgroup title="详细信息"><template v-for="(column, index) in dynamicColumns"><vxe-column:key="index":field="column.field":title="column.title":width="column.width"></vxe-column></template></vxe-colgroup></vxe-table>
</template>
2.script 设表格渲染标识isTableReady 请求数据前false 请求后true
使用 v-if="isTableReady"
来控制 vxe-table
的渲染,获取新数据后,将 isTableReady
设置为 true
,以渲染 vxe-table
。只有在数据请求返回后,vxe-table
才会被渲染,从而避免了在数据请求返回前渲染 vxe-table
导致的问题。
每次请求前数据进行清空处理,避免数据一直累加。
<script>
import 'vxe-table/lib/style.css';
import { VxeTable, VxeColumn, VxeColgroup } from 'vxe-table';
import axios from 'axios';export default {components: {VxeTable,VxeColumn,VxeColgroup},data() {return {tableData: [],dynamicColumns: [],isTableReady: false};},activated() {//每次设为false请求完数据后设为true,表格重新渲染this.isTableReady=false;this.fetchColumns();},methods: {fetchColumns() {axios.get('/api/columns') // 替换为你的后端 API 地址.then(response => {、//数据清空this.dynamicColumns=[];this.allCostTypeList= response.data;//数据处理this.allCostTypeList.forEach(item => {const newColumn = {title: item.name,field: item.value}this.dynamicColumns.push(newColumn)})}).catch(error => {console.error('Error fetching columns:', error);});}}
};
</script><style>
/* 你可以在这里添加自定义样式 */
</style>