elementui实战
安装与引入
通过 npm 或 yarn 安装 Element UI：
npm install element-ui --save
# 或
yarn add element-ui在 Vue 项目中全局引入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);按需引入需配合 babel-plugin-component 插件，减少体积。
基础组件使用
按钮组件示例：
<el-button type="primary" @click="handleClick">主要按钮</el-button>表单验证：
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-button @click="submitForm('formRef')">提交</el-button>
</el-form>rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
]
}布局与容器
使用 el-row 和 el-col 实现栅格布局：
<el-row :gutter="20">
<el-col :span="12"><div>左侧内容</div></el-col>
<el-col :span="12"><div>右侧内容</div></el-col>
</el-row>表格与分页
表格数据绑定：
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></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>主题定制
通过覆盖 SCSS 变量自定义主题：
- 安装
sass和sass-loader。 - 创建
element-variables.scss文件：$--color-primary: #ff4500; @import "~element-ui/packages/theme-chalk/src/index"; - 在项目中引入该文件替换默认样式。
常见问题解决
表单重置无效：
调用 resetFields 前需确保表单的 prop 属性与 v-model 绑定字段一致。
表格性能优化：
大数据量时启用 virtual-scroll 或分页加载，避免一次性渲染。
进阶功能
自定义指令：
通过 Vue 指令扩展组件功能，例如实现权限控制按钮的显隐。
国际化：
引入 locale 文件切换语言：
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });以上内容涵盖 Element UI 的核心用法与实战技巧，可根据项目需求灵活调整。
