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

elementui api

2026-01-14 20:03:41前端教程

以下是 Element UI 常用 API 的整理说明,按照组件分类呈现:

Form 表单

model 绑定表单数据对象
rules 表单验证规则
validate 方法用于整体表单验证
resetFields 方法重置表单字段

// 示例:表单验证
this.$refs.form.validate(valid => {
  if (valid) {
    // 验证通过逻辑
  }
})

Table 表格

data 表格数据源
columns 列配置(通过 <el-table-column> 实现)
row-click 行点击事件
selection-change 多选变化事件

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
</el-table>

Dialog 对话框

visible.sync 控制显示/隐藏
title 对话框标题
width 设置宽度
before-close 关闭前回调函数

elementui api

Message 消息提示

this.$message.success('操作成功')
this.$message.error('操作失败')
this.$message.warning('警告信息')

Upload 上传

action 上传地址
on-success 上传成功回调
before-upload 上传前校验
multiple 是否支持多选

DatePicker 日期选择

v-model 绑定日期值
type 设置类型(date/datetime/week 等)
disabledDate 禁用日期函数

elementui api

Pagination 分页

current-page 当前页码
page-size 每页条数
total 总条数
@current-change 页码变化事件

Tree 树形控件

data 树形数据
props 配置选项
node-click 节点点击事件
check-change 复选框变化事件

Select 选择器

v-model 绑定值
filterable 可搜索
multiple 多选模式
remote 远程搜索

注意:Element UI 2.x 版本适用于 Vue 2,若使用 Vue 3 需切换至 Element Plus。所有组件均需通过 this.$refs 访问实例方法,事件处理使用 @event-name 语法绑定。

标签: elementuiapi
分享给朋友:

相关文章

elementui ref

elementui ref

ElementUI 中使用 ref 的方法 在 ElementUI 中,ref 主要用于获取组件实例或 DOM 元素的引用,方便直接调用组件方法或操作 DOM。以下是几种常见的使用场景和示例: 获取…

elementui flex

elementui flex

以下是关于 Element UI 中 Flex 布局的详细说明和使用方法: Flex 布局基础 Element UI 的 Flex 布局基于 CSS Flexbox 模型,通过 el-row 和 e…

搭建elementui

搭建elementui

安装Element UI Element UI是一个基于Vue.js的组件库,适用于快速开发前端界面。在Vue项目中安装Element UI需要确保项目已初始化并安装了Vue.js。 使用npm安装…

elementui系列

elementui系列

Element UI 系列概述 Element UI 是一套基于 Vue.js 的桌面端组件库,由饿了么前端团队开发并开源。它提供了丰富的 UI 组件,适用于快速构建企业级中后台产品。以下是 Elem…

elementui message

elementui message

Element UI Message 组件使用指南 Element UI 的 Message 组件用于显示全局提示信息,常用于操作反馈、通知提醒等场景。以下为详细使用方法: 基础用法 引入 Mess…

elementui blur

elementui blur

ElementUI blur 事件处理 ElementUI 表单组件(如 el-input、el-select)支持 blur 事件,用于在输入框失去焦点时触发自定义逻辑。以下是常见用法和注意事项:…