element-plus 表格 操作列过多显示更多

当表格的操作列过多时，可以考虑将部分操作放在“更多”菜单中。在 Element Plus 中，可以使用 `el-dropdown` 和 `el-dropdown-menu` 组件来实现这一功能。下面是一个示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-dropdown>
          <el-button type="text">更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu>
            <el-dropdown-item v-if="row.canEdit" @click="handleEdit(row)">编辑</el-dropdown-item>
            <el-dropdown-item v-if="row.canDelete" @click="handleDelete(row)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          canEdit: true,
          canDelete: false
        },
        {
          name: '李四',
          age: 20,
          canEdit: false,
          canDelete: true
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('编辑', row)
    },
    handleDelete(row) {
      console.log('删除', row)
    }
  }
}
</script>

在上面的代码中，我们使用了 `el-dropdown` 和 `el-dropdown-menu` 组件来实现“更多”菜单的展示。在 `el-dropdown` 中，我们使用了 `type="text"` 属性来将按钮的边框去掉，使其看起来像一个普通的文本链接。在 `el-dropdown-menu` 中，我们根据 `row` 的 `canEdit` 和 `canDelete` 属性来动态展示编辑和删除按钮。

需要注意的是，当操作列过多时，可以将部分操作放在“更多”菜单中，但是不宜将所有操作都放在“更多”菜单中，否则可能会影响用户的使用体验。