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

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键盘

elementui键盘

Element UI 键盘事件处理 Element UI 是基于 Vue.js 的组件库,处理键盘事件通常结合 Vue 的原生事件绑定或自定义指令实现。 常用键盘事件绑定方式 在 Element…

elementui rowspan

elementui rowspan

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

elementui抽屉

elementui抽屉

elementui抽屉的基本用法 Element UI的抽屉组件(Drawer)是一种从页面边缘滑出的面板,常用于显示额外内容或操作。需要在项目中引入Element UI库后使用。 安装Elemen…

elementui作用

elementui作用

Element UI 的作用 Element UI 是一套基于 Vue.js 的桌面端组件库,主要用于快速构建用户界面。它提供了丰富的预定义组件,帮助开发者高效完成前端开发任务。 核心功能 提供高…

elementui $loading

elementui $loading

ElementUI $loading 使用方法 ElementUI 的 $loading 方法用于在页面或组件中显示加载状态,通常用于异步操作(如网络请求)期间提供视觉反馈。以下是其核心用法和配置选项…

elementui备注

elementui备注

使用 Element UI 添加备注功能 Element UI 提供了多种组件可以用来实现备注功能,具体选择取决于需求场景。以下是几种常见的实现方式: 输入框备注 使用 el-input 组件创建单…