1、需要

Table表格的表头，以及列表数据依据接口返回的数据动静生成列表。

2、剖析

1）动静生成表头

  • 两头的表头应用子组件的模式，依据返回来的数据，动静拼接生成列表的表头。
  • 将左右两边的表头拼接生成一个大的表头对象。

2）动静生成表头以及对应的列表内容数据

须要将第几个表头的列表项增加上。

3、局部代码

1）页面组件

<vTable v-if="categorySum.length > 0" :tableColumn="columns" :tableData="categorySum"    :pagination="pagination" @changePage="handleTableChange"></vTable>

2） 导入子组件

import vTable from '../common/Table'

3）拼接列表头及内容

this.linkHeaders.push({    title: value.stageName + '/张(框)',    children: [      {        title: '未支付',        dataIndex: 'stageList[' + index + '].pendingImageCount'      },      {        title: '进行中',        dataIndex: 'stageList[' + index + '].doingImageCount'      },      {        title: '已实现',        dataIndex: 'stageList[' + index + '].doneImageObjectCount'      }    ]  })this.columns = this.categoryHeaders.concat(this.linkHeaders).concat(this.pmHeaders)

4） 子组件代码

这里会波及到子组件调用父组件的内容。

<template><div>   <a-table    :columns="tableColumn"    :row-key="record => record.id"    :data-source="tableData"    :pagination="curPagination"    :bordered="true"    size="small"    @change="handleTableChange"  >  </a-table></div></template><script lang="ts">export default {  props: { tableColumn: Array, tableData: Array, pagination: Object },  data () {    return {      curPagination: { ...this.pagination }    }  },  methods: {    handleTableChange (pagination, filters, sorter) {      const pager = { ...this.curPagination }      pager.current = pagination.current      this.curPagination = pager      this.$emit('changePage', pagination)    }  }}</script>

以上