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

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 关闭前回调函数

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 禁用日期函数

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 语法绑定。

elementui api

标签: elementuiapi
分享给朋友:

相关文章

jquery api

jquery api

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery API 的核心功能和使用方法: 选择器 jQuery…

elementui中文网

elementui中文网

Element UI 中文网相关信息 Element UI 是一款基于 Vue.js 的开源 UI 组件库,由饿了么前端团队开发和维护。以下是关于 Element UI 中文网的相关信息: 官方网…

elementui获取input的值

elementui获取input的值

获取 input 值的常用方法 在 Element UI 中,可以通过 v-model 双向绑定或 ref 引用的方式获取 input 组件的值。 使用 v-model 双向绑定 <…

elementui table

elementui table

ElementUI Table 基本用法 ElementUI 的 Table 组件用于展示结构化数据,支持排序、筛选、分页等功能。以下是一个基础示例: <template> &…

iview elementui

iview elementui

iview与Element UI对比 iview和Element UI都是基于Vue.js的UI组件库,适用于快速开发企业级中后台产品。以下是两者的主要差异和特点: 设计风格 iview采用圆角设…

elementui视频

elementui视频

以下是关于 ElementUI 视频资源的整理,涵盖教程、实战案例和官方资源: ElementUI 官方视频资源 ElementUI 官方文档虽以文字为主,但部分社区或第三方平台可能有官方团队发布的…