dropdown怎么用
时间: 2023-12-01 10:39:07 浏览: 23
Dropdown是一个下拉菜单组件,可以在点击或者悬浮时展开菜单选项。使用Dropdown需要先引入组件,然后在需要使用的地方添加相应的代码。下面是一个简单的使用Dropdown的例子:
1. 在template中添加Dropdown组件的代码:
```
<Dropdown @on-click="dropdownClick" trigger="click">
<div class="dropdown-button">
<span>选择</span>
<Icon type="ios-arrow-down"></Icon>
</div>
<DropdownMenu slot="list">
<DropdownItem name="修改">修改</DropdownItem>
<DropdownItem name="删除">删除</DropdownItem>
</DropdownMenu>
</Dropdown>
```
2. 在data中添加columns属性,用于表格的列设置:
```
data() {
return {
columns: [
{
title: "操作",
slot: "operation",
align: "center",
width: 150,
},
],
};
},
```
3. 在methods中添加dropdownClick方法,用于处理Dropdown的点击事件:
```
methods: {
dropdownClick(val) {
if (val == "修改") {
// 执行修改操作
} else {
// 执行删除操作
}
},
},
```
需要注意的是,Dropdown的事件可以写在DropdownItem组件中,也可以写在Dropdown组件中。同时,Dropdown还有其他的属性和事件,可以根据实际需求进行设置和使用。