elementui中el-table中操作更多下拉菜单(el-dropdown)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
html
<el-table-column label="操作">
<template slot-scope="scope">
<el-dropdown @command="Operate">
<el-link :underline="false">更多<i class="el-icon-arrow-down el-icon--right"></i></el-link>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="iconfont icon-bianji"
:command="handleCommand(scope.row, 'bianji')">编辑</el-dropdown-item>
<--这里不限两个参数,多个参可以在handleCommand()中传递 -->
<el-dropdown-item icon="iconfont icon-shanchu"
:command="handleCommand(scope.row, 'shanchu')">删除</el-dropdown-item>
<-- <el-dropdown-item :command="handleCommand(scope.row, 'xxxxxx')"> ......更多选项</el-dropdown-item> -->
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
js
<script>
export default {
methods:{
// 根据唯一值执行对应操作
Operate(c) { --------------------c.row.Id是列表当前行的ID
switch (c.command) {
case "shanchu": //调用删除的方法
this.Remove(c.row.Id);
break;
case "bianji": // //调用编辑的方法
this.Edits(c.row.Id);
break;
//......更多方法
default:
return;
}
},
handleCommand(row, command) { ------------可以自己打印下
return {
row: row,
command: command
};
},
//方法
Remove(){}
Edits(){},
}
}
</script>
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)