新建组件：Table.vue
<template><el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label"><template v-for="item in coloumnHeader.children"><tableColumnv-if="item.children && item.children.length":key="item.id":coloumn-header="item"/><el-table-columnv-else:key="item.name":label="item.label":prop="item.prop"/></template></el-table-column>
</template>
<script>
export default {name: 'TableColumn',props: {coloumnHeader: {type: Object,required: true}}
}
</script>新建组件：
<template><div class="app-container"><el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" border show-summary><template v-for="item in tableConfig"><table-columnv-if="item.children && item.children.length":key="item.id":coloumn-header="item"/>//编辑操作按钮<el-table-columnv-else-if="item.label == '操作'":key="item.id + 'r'"align="center":label="item.label"width="200"><template #default="{ row }"><el-buttonv-if="row.edit"size="small"type="success"@click="confirmEdit(row)">保存</el-button><el-buttonv-elseicon="el-icon-edit"size="small"type="primary"@click="row.edit = !row.edit">编辑</el-button></template></el-table-column>//一级表头<el-table-columnv-else:key="item.id + 1":label="item.label":prop="item.prop">//编辑表格<template slot-scope="scope"><inputtype="text"v-model="scope.row[item.prop]"v-show="scope.row.edit"/><span v-show="!scope.row.edit">{{ scope.row[item.prop] }}</span></template></el-table-column></template></el-table></div>
</template>
<script>
// 引入api
import TableColumn from './Table.vue'
export default {// 定义页面数据components: { Treeselect, DynamicTable, TableColumn },data() {return {// 表数据tableData: [{parkName: '花木',date: '2023',count0: '1',money0: '2',count1: '3',money1: '4',edit: false,}],// 表头数据tableConfig: [{"id": 2, "label": "停车场名称", "prop": "parkName", "children": null}, {"id": 85, "label": "日期", "prop": "date", "children": null}, {"id": 0, "label": "微信支付", "prop": "0", "children": [{"id": 12, "label": "交易笔数", "prop": "count0", "children": null}, {"id": 89, "label": "交易金额", "prop": "money0", "children": null}]}, {"id": 1, "label": "支付宝支付", "prop": "1", "children": [{"id": 40, "label": "交易笔数", "prop": "count1", "children": null}, {"id": 61, "label": "交易金额", "prop": "money1", "children": null}]}],}}
}
</script>
)
)
