Day 25/100 前端Table 表头及列表内容动态生成

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>

以上