ActionButton 操作按钮
代码演示
基础用法
vue
<script setup>
import { message } from 'ant-design-vue'
/**
* 点击
* @param {string} msg
*/
function handleClick(msg) {
message.info(msg)
}
</script>
<template>
<div>
<x-action-button @click="handleClick('点击了编辑')">
编辑
</x-action-button>
<x-action-button @click="handleClick('点击了删除')">
删除
</x-action-button>
<x-action-button
disabled
@click="handleClick('点击了禁用')"
>
禁用
</x-action-button>
</div>
</template>
<style lang="less" scoped></style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
在 table 中使用
vue
<script setup>
import { DownOutlined, SmileOutlined } from '@ant-design/icons-vue'
const columns = [
{
name: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
},
{
title: 'Action',
key: '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'],
},
]
</script>
<template>
<a-table
:columns="columns"
:data-source="data"
:pagination="false"
>
<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'">
<x-action-button>Edit</x-action-button>
<x-action-button>Delete</x-action-button>
<a-dropdown>
<x-action-button>
More
<down-outlined class="fs-10" />
</x-action-button>
<template #overlay>
<a-menu>
<a-menu-item> 1st menu item</a-menu-item>
<a-menu-item> 2nd menu item</a-menu-item>
<a-menu-item> 3rd menu item</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
</template>
</a-table>
</template>
<style lang="less" scoped></style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tag | 标签 | string | span |
| divider | 是否显示分割线 | boolean | true |
| disabled | 禁用 | boolean | false |