elementui api
以下是 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 语法绑定。







