【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-s
·
磕磕绊绊才(大概)搞懂官网的例子。简单记录一下
例子:
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的具体用法仍在研究中。
更多推荐
已为社区贡献1条内容
所有评论(0)