elementui操作
ElementUI 常用操作指南
表单操作
ElementUI 表单组件支持动态验证和数据绑定。通过 el-form 组件定义表单，结合 rules 属性设置验证规则，使用 v-model 绑定数据。
<el-form :model="formData" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-button @click="submitForm">提交</el-button>
</el-form>methods: {
submitForm() {
this.$refs.formRef.validate(valid => {
if (valid) {
// 表单验证通过后的操作
}
});
}
}表格操作
ElementUI 表格组件支持分页、排序和自定义模板。通过 el-table 定义表格，el-table-column 定义列。
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期" sortable></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="10"
layout="total, prev, pager, next"
:total="total">
</el-pagination>弹窗操作
ElementUI 提供了多种对话框组件，包括消息提示、确认框和自定义内容弹窗。
// 消息提示
this.$message.success('操作成功');
// 确认对话框
this.$confirm('确认删除吗？', '提示', {
type: 'warning'
}).then(() => {
// 确认操作
}).catch(() => {
// 取消操作
});
// 自定义弹窗
this.$alert('<strong>HTML内容</strong>', '标题', {
dangerouslyUseHTMLString: true
});导航菜单
ElementUI 的菜单组件支持多级嵌套和路由集成。
<el-menu
:default-active="activeIndex"
mode="horizontal"
@select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template #title>产品</template>
<el-menu-item index="2-1">选项1</el-menu-item>
</el-submenu>
</el-menu>日期时间选择
ElementUI 提供了丰富的日期时间选择器，支持多种格式和范围选择。
<el-date-picker
v-model="dateValue"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>上传文件
ElementUI 的文件上传组件支持多种上传方式和文件限制。
<el-upload
action="/upload"
:limit="3"
:on-exceed="handleExceed">
<el-button type="primary">点击上传</el-button>
</el-upload>methods: {
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择3个文件，已选择${files.length}个文件`);
}
}主题定制
ElementUI 支持通过 SCSS 变量修改主题样式。在项目中创建样式文件覆盖默认变量。
/* element-variables.scss */
$--color-primary: #409EFF;
@import "~element-ui/packages/theme-chalk/src/index";国际化
ElementUI 支持多语言，通过引入对应的语言包实现。
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });注意事项
- 组件按需引入可减小打包体积
- 表单验证规则需与
prop属性对应 - 表格大数据量建议使用虚拟滚动优化性能
- 弹窗组件需在
Vue实例挂载后调用
