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

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 远程搜索

elementui api

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

标签: elementuiapi
分享给朋友:

相关文章

elementui响应式布局

elementui响应式布局

响应式布局基础概念 响应式布局指页面能够根据屏幕尺寸自动调整结构和样式,确保在不同设备上呈现良好的用户体验。Element UI 基于 Vue.js,其组件默认支持响应式设计,但需结合 CSS 媒体查…

elementui升级plus

elementui升级plus

Element UI 升级到 Element Plus 的方法 Element Plus 是 Element UI 的升级版本,专为 Vue 3 设计,提供了更好的性能和更多新特性。以下是升级的具体步…

yarn elementui

yarn elementui

安装 Element UI 与 Yarn Element UI 是一个基于 Vue.js 的组件库,使用 Yarn 作为包管理工具可以快速安装和集成。以下是具体方法: 确保已安装 Yarn 和 Vu…

elementui treegrid

elementui treegrid

ElementUI TreeGrid 实现方法 ElementUI 本身并未直接提供 TreeGrid 组件,但可以通过组合 Tree 和 Table 组件或使用第三方扩展库实现类似功能。以下是几种实…

面试elementui

面试elementui

面试准备:ElementUI 核心知识点 基础组件与用法 熟悉常用组件如 el-button、el-form、el-table、el-dialog 的使用场景和配置项。例如表单验证需结合 rules…

elementui rowspan

elementui rowspan

合并行(Rowspan)在 Element UI 表格中的实现 Element UI 的表格组件默认不直接支持 rowspan 属性,但可以通过自定义 span-method 方法实现合并行功能。以下…