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分支:2 个月前 )
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 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)