当前位置：首页 > 前端教程

elementui action

2026-03-05 21:49:35前端教程

ElementUI Action 组件

ElementUI 的 Action 组件通常指 el-button 中的 action 属性或与操作相关的组件（如 el-dropdown 的菜单项）。以下是常见用法和功能说明：

按钮操作（el-button）

通过 type 属性定义按钮的操作类型，支持 primary、success、warning、danger、info 等样式：

elementui action

<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button type="danger" @click="handleDelete">删除</el-button>

下拉菜单操作（el-dropdown）

结合 el-dropdown-menu 实现动作菜单：

<el-dropdown>
  <el-button type="primary">
    更多操作<i class="el-icon-arrow-down"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="action1">操作1</el-dropdown-item>
    <el-dropdown-item @click.native="action2">操作2</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

表格行操作（el-table）

在表格中为每行添加操作按钮：

elementui action

<el-table :data="tableData">
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

对话框操作（el-dialog）

在对话框底部添加操作按钮：

<el-dialog title="提示">
  <span>确认执行此操作？</span>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="confirmAction">确认</el-button>
  </div>
</el-dialog>

自定义操作逻辑

通过事件绑定实现动作响应：

methods: {
  handleClick(action) {
    if (action === 'save') {
      this.saveData();
    } else if (action === 'cancel') {
      this.closeDialog();
    }
  }
}