[iview]Table中使用Dropdown

最新推荐文章于 2023-11-16 14:07:55 发布

西格玛猫

最新推荐文章于 2023-11-16 14:07:55 发布

阅读量1.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43810973/article/details/106499313

版权

Vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

<template>
	<div>
		<Table
			:columns="columns"
			:data="data"
			style="overflow:visible"
			stripe
		>
			<template slot="action">
				<Button type="primary" size="small" style="margin-right: 5px">编辑</Button>
				<Dropdown trigger="click">
					<Button type="primary" size="small">
						操作
						<Icon type="ios-arrow-down"></Icon>
					</Button>
					<DropdownMenu slot="list">
						<DropdownItem>
							<Icon type="md-create"></Icon>
							操作一
						</DropdownItem>
						<DropdownItem>
							<Icon type="md-create"></Icon>
							操作二
						</DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</template>
		</Table>
	</div>
</template>
<script>
export default {
	data() {
		return {
			data: [
				{
					id: 1
				},
				{
					id: 2
				}
			],
			columns: [
				{
					title: 'ID',
					key: 'id'
				},
				{
					title: '操作',
					slot: 'action'
				}
			]
		}
	}
}
</script>