- Published on
记Vue3在table使用dropdown的写法
- Authors
- Name
- Darwin Stone
- @dustred233
需求分析
在 table表格
的每一行中增加操作列,但是操作选项比较多,
- 如果直接展示出来,会占用较大的空间
- 如果将操作选项换成小图标的话,对于用户操作来说并不是很清晰
所以目前解决方案是 将这些操作选项收到一个 dropdown下拉菜单
中。
dropdown下拉菜单
官方文档 https://element.eleme.cn/2.3/#/zh-CN/component/dropdown 并未介绍在 table表格
中的用法, 下面记录实现片段。
代码实现
<el-table-column prop="" label="操作" width="100">
<template #default="scope">
<el-dropdown @mouseenter.stop @command="(cmd) => handleCommand(cmd, scope.row)" :row="scope.row">
<el-button type="primary">
操作<i class="el-icon-more-outline"></i>
</el-button>
<template #dropdown>
<el-dropdown-menu v-slot="dropdown">
<el-dropdown-item command="oneFunc">操作1</el-dropdown-item>
<el-dropdown-item command="twoFunc">操作2</el-dropdown-item>
<el-dropdown-item command="threeFunc">操作3</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
<script setup>
const handleCommand = async(command, row) => {
switch(command){
case "oneFunc":
oneFunc(row);
break;
case "twoFunc":
twoFunc(row);
break;
case "threeFunc":
threeFunc(row);
break;
default:
break;
}
}
const oneFunc = async(row) => {
// do oneFunc
}
const twoFunc = async(row) => {
// do twoFunc
}
const threeFunc = async(row) => {
// do threeFunc
}
</script>