【VUE】ant-design-vue table 初级应用：column中通过DataIndex与data中的项关联；让列值变成超链接；添加action列

磕磕绊绊才（大概）搞懂官网的例子。简单记录一下

例子：

https://www.antdv.com/components/table-cn/#components-table-demo-ellipsis-column

 

<template>
  <a-table :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="customTitle"><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: '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' },
  },
];

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>

（code同样来自官网例子）

1 如何确定每一列都显示的是data中的哪一项：

column中的dataIndex

和data中每一个元素中的key：

 

2 如何让某一列成为超链接：

首先，template中加入：

    <a slot="name" slot-scope="text">{{ text }}</a>

然后，在想要变成超链接的列加入：

scopedSlots: { customRender: 'name' },

slot可以不一定是name，但一定要与customRendermatch。

比如：

<template>
      <a-table :columns="columns" :data-source="data">
        <a slot="name1" slot-scope="text">{{ text }}</a>
       <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 = [
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" }
  },
  {
    title:'Title',
    key: "title",
    dataIndex: "title",
    slots: { title: "title" },
    scopedSlots: { customRender: "name1" } // 注意这个是name1，与templates中的slot对应
  },
  {
    title: "Status",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "Age",
    key: "age",
    dataIndex: "age",  
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    scopedSlots: { customRender: "name" }  // 注意这个是name
  },


];

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

结果：

 

也就是说！

在template中为列的展示结果创建模板，然后在column中通过scopeslots来确定使用哪一种样式。

样式模板可以重复使用，不需要一个列出一种。

下面是title和address都使用slot=name设置的样式：

<template>
      <a-table :columns="columns" :data-source="data">
        <a slot="name1" slot-scope="text">{{ text }}</a>
       <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 = [
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" }
  },
  {
    title:'Title',
    key: "title",
    dataIndex: "title",
    slots: { title: "title" },
    scopedSlots: { customRender: "name1" } // 注意这个是name1，与templates中的slot对应
  },
  {
    title: "Status",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "Age",
    key: "age",
    dataIndex: "age",  
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    scopedSlots: { customRender: "name" }  // 注意这个也改成name1了
  },


];

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

结果：

 

3 如何添加action 列

看上面的code即可。

slot-scope的具体用法仍在研究中。