Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件

Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件
一共两种方法:
一、直接给el-dropdown-item 绑定点击事件。这里需要用 @click.native=" name" 这样绑定才会有效。

<el-table :data=“orderAcceptTableData” stripe border height=“700” @selection-change=“selectionChange” @row-dblclick=“orderAcceptView”>

</el-table-column>
<el-table-column label="操作" fixed="right" width='140' align="center">
    <template slot-scope="scope">
        <el-dropdown>
            <span class="el-dropdown-link el-button--lightblue dropbutton">
                    操 作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="orderAcceptView(scope.row)">查看</el-dropdown-item>
                <el-dropdown-item @click.native="modify(scope.row)">修改</el-dropdown-item>
                <el-dropdown-item @click.native="del(scope.row)">删除</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>                
</el-table-column>

注:通过scope.row传入选中的行
好处是可以使用dialog;
//操作-修改时触发
modify(row){
this.$refs.modifyInfo.open(row);
},

还有一种方法是给el-dropdown根组件监听command ,再el-dropdown-item 绑定command值。 methods内详细写监听对应的方法

handleCommand(command) {

if(command == 'loginOut'){
	this.$confirm('are you sure loginOut?', '提示', {
	confirmButtonText: '确定',
	cancelButtonText: '取消',
	type: 'warning'
}).then(() => {
	this.$message({
	type: 'success',
	message: 'loginOut成功!'
});
}).catch(() => {
	this.$message({
	type: 'info',
	message: '已取消loginOut'
});
});

}
缺点:如果在处理事件内需要弹出表单元素,则只能使用原生html,无法使用dialog。

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 你可以使用Vue3中的`<teleport>`组件将`<el-dropdown>`渲染到页面中的任何位置,然后在按钮绑定`click`事件,点击按钮时通过`ref`获取到`<el-dropdown>`的实例,调用其`show`方法即可弹出下拉框。 代码示例: ```html <template> <div> <button @click="showDropdown">点击弹出</button> <teleport to="body"> <el-dropdown ref="dropdown"> <el-dropdown-menu> <el-dropdown-item>Action 1</el-dropdown-item> <el-dropdown-item>Action 2</el-dropdown-item> <el-dropdown-item>Action 3</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </teleport> </div> </template> <script> import { ref } from 'vue'; import { ElDropdown } from 'element-plus'; export default { components: { ElDropdown, }, setup() { const dropdownRef = ref(null); const showDropdown = () => { if (dropdownRef.value) { dropdownRef.value.show(); } }; return { dropdownRef, showDropdown, }; }, }; </script> ``` 在上面的示例中,我们使用了`<teleport>`将`<el-dropdown>`渲染到了页面的`body`中,然后在按钮绑定了`showDropdown`方法,该方法通过`ref`获取到`<el-dropdown>`的实例并调用其`show`方法来显示下拉框。 ### 回答2: Vue3中的el-dropdown组件可以通过按钮单击来弹出下拉菜单。要实现这个功能,首先需要在Vue组件中引入el-dropdown组件并注册它。然后,在模板中使用el-dropdown标签将按钮下拉菜单包裹起来。 例如,在一个Vue组件中,我们可以这样使用el-dropdown来实现按钮单击弹出菜单的效果: ``` <template> <el-dropdown @command="handleCommand"> <el-button type="primary">按钮</el-button> <el-dropdown-menu> <el-dropdown-item command="option1">选项1</el-dropdown-item> <el-dropdown-item command="option2">选项2</el-dropdown-item> <el-dropdown-item command="option3">选项3</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> ``` 在上面的例子中,el-dropdown包含了一个el-button和el-dropdown-menu。当按钮被单击时,el-dropdown会弹出下拉菜单。每个el-dropdown-item标签表示一个下拉菜单选项,command属性用于标识选项的值。 为了处理下拉菜单选项的点击事件,我们可以在Vue组件的methods中定义一个handleCommand方法,并在el-dropdown标签上使用@command绑定该方法。例如: ``` <script> export default { methods: { handleCommand(command) { console.log('选中的选项:', command); } } } </script> ``` 在handleCommand方法中,我们可以根据command参数执相应的操作。这只是简单地将选项的值输出到控制台。 综上所述,通过使用el-dropdown组件和按钮的单击事件,我们可以实现在Vue3中点击按钮弹出下拉菜单的效果。 ### 回答3: 在Vue3中,可以使用el-dropdown组件实现单击按钮弹出菜单的效果。具体步骤如下: 1. 首先,需要在Vue的模板中引入el-dropdown组件,例如: ``` <template> <el-dropdown @click.native="showMenu"> <el-button type="primary">按钮</el-button> <el-dropdown-menu v-show="isShowMenu"> <!-- 这添加下拉菜单的内容 --> </el-dropdown-menu> </el-dropdown> </template> ``` 2. 在Vue的脚本中,定义一个变量isShowMenu来控制下拉菜单的显示和隐藏状态: ``` <script> export default { data() { return { isShowMenu: false // 下拉菜单的显示状态,默认为false(隐藏) }; }, methods: { showMenu() { this.isShowMenu = !this.isShowMenu; // 单击按钮时切换下拉菜单的显示状态 } } }; </script> ``` 3. 在el-dropdown组件上使用@click.native绑定一个点击事件,当按钮被单击时,调用showMenu方法来切换下拉菜单的显示和隐藏状态。 通过以上步骤,当点击按钮时,下拉菜单会显示或隐藏,实现了单击按钮弹出菜单的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值