Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件
Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件一共两种方法:一、直接给el-dropdown-item 绑定点击事件。这里需要用 @click.native=" name"这样绑定才会有效。<el-table :data=“orderAcceptTableData” stripe border hei...
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。
更多推荐
所有评论(0)