Ant Design Vue table字典展示

Ant Design Vue 提供了一个 Table 组件，可以用来展示数据，包括字典数据。为了展示字典数据，我们可以使用 slot-scope 来自定义表格的列。

下面是一个展示字典数据的例子：

<template>
  <a-table :data-source="dataSource">
    <a-table-column title="名称" dataIndex="name" />
    <a-table-column title="状态" dataIndex="status">
      <template slot-scope="text">
        {{ statusMap[text] }}
      </template>
    </a-table-column>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { name: 'Apple', status: 1 },
        { name: 'Banana', status: 2 },
        { name: 'Orange', status: 3 },
      ],
      statusMap: {
        1: '正常',
        2: '禁用',
        3: '异常',
      },
    };
  },
};
</script>

在上面的例子中，我们使用了 slot-scope 来自定义了一个表格列，用来展示字典数据。在这里，我们定义了一个 statusMap 对象，用来将状态值转换成相应的文字描述。在表格中，我们通过传入 statusMap[text] 来展示对应的状态文字。