关于前端:Day-25100-前端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>

以上