Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件
2019-04-18 13:16
6106 查看
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。
相关文章推荐
- iOS--- 动态添加了按钮,绑定同一个点击事件,如何判断点击的是哪个?
- 点击添加按钮,使用ajax动态添加一行和移除一行,并且序号重新排序和数据不重复操作判断
- ios 动态添加了按钮,绑定同一个点击事件,如何判断点击的是哪个?
- 开发中遇到的问题-动态创建按钮并且添加带有参数的点击事件
- ios 动态添加了按钮,绑定同一个点击事件,如何判断点击的是哪个?
- vue.js 实现点击按钮动态添加li的方法
- vue+element UI实现表格中动态添加开关控制按钮
- toolstripbutton 动态添加后 获取当前点击的按钮的值 并且将其删除
- jQuery为动态添加的新元素绑定点击事件
- vue 点击增加按钮增加一行下拉框,绑定下拉框值,点击删除按按钮删除对应行
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- c#中动态添加按钮并添加点击事件
- asp.net C#动态添加创建生成button按钮控件没有触发执行响应click绑定事件处理
- js-动态添加li、option,并且添加其点击事件
- jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
- HorizontalScrollView动态添加子view,并且设置每个子view的点击事件
- vue动态生成dom并且自动绑定事件
- 动态生成 指定列数、行数的表格。并在每行最后一列添加一个删除按钮。点击删除按钮、删除本行!
- jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性
- Unity UGUI按钮动态添加点击事件