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

1 篇文章 0 订阅

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

例子:

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的具体用法仍在研究中。

 

  • 12
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值