Iview dropdown用法 - 插入table表格中,button事件

本文详细介绍了如何在Vue.js的Table组件中插入Dropdown模板,通过slot-scope和事件监听实现行操作功能。内容包括如何点击按钮展开Dropdown菜单,以及获取当前行的数据进行进一步的操作,如列表项的选择。示例代码展示了如何定义table的action列并展示Dropdown菜单,以及在JavaScript中处理点击事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 用slot插入table中

①在vue页面中的table标签内插入dropdown模板

<Table>

<Template slot-scope="{row}" slot="action">     //row:获得本行数据 slot:js插入

<div>

<Dropdown trigger="click" @on-click="clickType"> //引发一个事件,点击切换DropdownItem项

<Button @click="dropDown(row.id.row.name...)">  输入文字</Button> // 点击获取本行的id,name属性

<DropdownMenu slot="list">

<DropdownItem name="lbxxsmc">列表项显示名称</DropdownItem>

<DropdownItem name="lbxxsmc1">列表项显示名称1</DropdownItem>

<DropdownItem name="lbxxsmc2">列表项显示名称2</DropdownItem>

</DropdownMenu>

</Dropdown>

</div>

</Template>

</Table>

2.js页面

{

                    title: '操作',

                    slot: 'action'

                }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值