记Vue3在table使用dropdown的写法

需求分析

在 table表格 的每一行中增加操作列，但是操作选项比较多，

• 如果直接展示出来，会占用较大的空间
• 如果将操作选项换成小图标的话，对于用户操作来说并不是很清晰

所以目前解决方案是 将这些操作选项收到一个 dropdown下拉菜单 中。

dropdown下拉菜单 官方文档 https://element.eleme.cn/2.3/#/zh-CN/component/dropdown 并未介绍在 table表格 中的用法，

下面记录实现片段。

代码实现

代码语言：javascript复制

<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>

dropdown html-table vue3下拉菜单

1 人点赞