ant design vue 的table组件的使用

table组件的使用

就以官方文档的第一个来进行讲述个人的理解

代码如图：

<template>
  <a-table :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="nameTitle"><a-icon type="smile-o" /> Name</span>
    <span slot="tags" slot-scope="tags">
      <a-tag
        v-for="tag in tags"
        :key="tag"
        :color="
          tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
        "
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
    <span slot="action" slot-scope="text,record">
      <a>Invite 一 {{ record.name }}</a>
      <a-divider type="vertical" />
      <a>Delete</a>
      <a-divider type="vertical" />
      <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
    </span>
  </a-table>
</template>

<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "nameTitle" },
    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" },
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>

<style>
</style>

为了弄清他的各个功能，我们先把里面的一大堆代码去掉如下图：
来我们我们先
我们先看看浏览器的效果是怎么样的

差别如红色箭头所示，那么我们来分析一下原因，a-table什么都没有，只有传入一个columns跟一个data,那他们是怎么对应起来的,如图，颜色对应着看，有解释在里面

下一步,先解开第一行代码然后看看效果


老规矩，先分析这行的含义

下一步


那么是什么引起的呢

还有最后两个封印，加油哇！


老规矩，什么原因呢?

最后一个啦!

效果就全出来啦

那么我们废话不多说，冲冲冲!分析原因

好啦！就这么多啦！希望你能帮助的到你!