记Vue3在table使用dropdown的写法

原创

:Darwin

修改于 2023-08-19 14:01:36

3930

修改于 2023-08-19 14:01:36

文章被收录于专栏：WorkLogsWorkLogs

需求分析

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

dropdown