使用 Ant Design Vue Table 组件的经验总结

1.组件介绍

总结一下使用表格 Table - Ant Design Vue (antdv.com)的经验。首先这个组件就是一个表格，网页上大概长这样。

然后我们来根据代码一个个对应，这里要说一下我一开始用过Element UI和Element Plus的表格，所以看Ant Design Vue的表格的时候感觉还能看得懂，真得多玩玩每个组件，用的时候才能顺手一点

<template>
  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
</template>

2.表格结构与属性

代码好长啊……不知道大伙晕不晕，我反正先晕了。这时候就开始用出我的绝活，给每个标签随便加点文字，或者注释掉一段，来看看都有啥用 。经过一阵鼓捣，最终结果如下。

<a-table :columns="columns" :data-source="data"></a-table>

 表头定制

我们可以看到最外层是a-table这个标签，别和我说什么最外层明明是template，这么喜欢抬杠你给我去工地。打开我的翻译软件，colums：列，data-source：数据源，那么画过表格的同学都知道一张表分表头和内容，也就是对应这里的列和数据源。然后我们再看下一层发现了一个叫headerCell和一个叫bodyCell的东西，这不就是表头和内容吗。感觉这个组件真是太简单了（贴一下代码）

<template #headerCell="{ column }">
    <!-- 其余内容 -->
</template>
<template #bodyCell="{ column, record }">
    <!-- 其余内容 -->
</template>

 表格内容解析

我们从上到下一个个看里面的代码，并分别解释一下。 通过template + v-if，我们可以找到列的key为name的那一列，并使用icon图标为这一列添加了一个笑脸

<template #headerCell="{ column }">
    <!-- 当我们想对某一列的表头，这里就是对name列,做一些操作时就需要用到下面的代码 -->
    <template v-if="column.key === 'name'">
        <span>
            <smile-outlined />
              Name
        </span>
    </template>
</template>

表格内容的代码看起来就很多了，对于新手小白可能就感觉这是嘛呀？这里我的建议是把代码分块来看，每一个template就是对应的一列数据，前面说了column是列，record就是这一列底下的所有记录（或者说数据）。

<template #bodyCell="{ column, record }">
    <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
    </template>
    <template v-else-if="column.key === 'tags'">
        <span>
            <a-tag
             v-for="tag in record.tags"
             :key="tag"
             :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
             >
            {{ tag.toUpperCase() }}
            </a-tag>
        </span>
    </template>
    <template v-else-if="column.key === 'action'">
        <span>
            <a>Invite 一 {{ record.name }}</a>
            <a-divider type="vertical" />
            <a>Delete</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
    </template>
</template>

3.简易表格示例

如果仅仅是一个简单的表格展示，你甚至不必这些代码只需要一个表格并给他配置数据源和列你就可以在网页上看到这个表格。下面是我写的一个简单例子

<template>
    <a-table :dataSource="dataSource" :columns="columns" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const dataSource = ref([
    {
        key: '1',
        name: 'Mike',
        age: 32,
        address: '10 Downing Street',
    },
    {
        key: '2',
        name: 'John',
        age: 42,
        address: '10 Downing Street',
    },
])
const columns = ref([
    {
        //列的名字
        title: 'Name',
        //列在数据源里的名字
        dataIndex: 'name',
        //这是给vue用的可以不管，只要设置dataIndex就可以了
        key: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
    },
])
</script>