elementui使用
elementui 安装与引入
通过 npm 安装 Element UI：
npm install element-ui -S在 main.js 中全局引入：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)按需引入（需配合 babel-plugin-component）：
import { Button, Select } from 'element-ui'常用组件示例
表单组件
<el-form :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择">
<el-option label="区域一" value="shanghai"></el-option>
</el-select>
</el-form-item>
</el-form>表格组件
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>主题定制
-
通过变量覆盖修改主题色：
$--color-primary: #409EFF; /* 修改默认主题色 */ @import "~element-ui/packages/theme-chalk/src/index"; -
使用在线主题生成工具（element.eleme.io/#/zh-CN/theme）
国际化配置
设置中文语言包：
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(ElementUI, { locale })常见问题解决
表单验证需在 rules 中定义：
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
}表格数据更新需确保引用变化：
this.tableData = [...newData] // 使用新数组触发响应式更新最佳实践
复杂表单建议拆分验证规则到单独文件管理
表格大数据量使用虚拟滚动优化性能：
<el-table :data="data" height="500" :row-height="50"></el-table>组件二次封装时保持 props 透传：
Vue.component('my-button', {
inheritAttrs: false,
template: `<el-button v-bind="$attrs"></el-button>`
})
