Ant-Design-Vue动态表头并填充数据

Ρause2024-06-10 0:07

使用Ant Design Vue框架的Table组件时，我们通过配置Table组件的colums属性来生成表头

复制代码

<a-table :columns="columns" :data-source="data"></a-table>
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' },
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

但是，当我们做智能表单项目的需求是，我们要根据数据库储存的JSON对象动态的生成表头。

当时脑子里的第一个想法是，在拿到后台传过来的JSON数据之后在JS中根据JSON对象创建一个新的colums，然后生成动态的表头。这样做肯定是没有问题的，代码省略。

但是后来采取了循环创建 a-table-column 的方式来实现动态表头。个人感觉这样更符合逻辑一些

复制代码

<a-table>         
     <!-- 定制表格表头 -->
              <template v-for="(item, itemIndex) in widgetData.originalLine.fieldList">
                <a-table-column
                  v-if="hasGrid(item.id)"
                  :title="item.name"
                  :key="item.id"
                  :width="widthCal(item.id)"
                  :align="alignment(item.id)"
                >
                  <template slot-scope="text, record">
                    <div v-if="!item.tableFixedColumnsDisplay">
                      {{ getTableContent(record,item.id) }}
                    </div>
                  </template>
                </a-table-column>
              </template>

复制代码

<a-table>

这样就搞定了！