elementui坑
elementui常见问题与解决方案
表单验证不生效
确保表单项设置了prop属性且与rules中的字段名一致
<el-form :model="form" :rules="rules">
<el-form-item prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>验证规则需要返回回调函数
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
}表格渲染异常
动态数据更新后需调用doLayout方法
this.$nextTick(() => {
this.$refs.table.doLayout()
})分页器与表格联动时注意current-page需使用.sync修饰符
<el-pagination
:current-page.sync="currentPage"
@current-change="handleCurrentChange">
</el-pagination>日期选择器格式问题
使用value-format指定绑定值的格式
<el-date-picker
v-model="date"
value-format="yyyy-MM-dd">
</el-date-picker>需要单独引入中文语言包
import locale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(ElementUI, { locale })自定义主题不生效
修改SCSS变量前需引入原始样式文件
@import "~element-ui/packages/theme-chalk/src/index";
$--color-primary: #409EFF;
@import "~element-ui/packages/theme-chalk/src/button";组件样式覆盖
深层选择需要使用/deep/或::v-deep
.el-dialog /deep/ .el-dialog__body {
padding: 10px;
}按需加载配置
babel.config.js需正确配置
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]动态表单渲染
v-for循环表单项时需添加唯一的key
<el-form-item
v-for="(item, index) in dynamicItems"
:key="index + item.field"
:prop="'items.' + index + '.value'">
</el-form-item>多级菜单缓存
结合keep-alive和router-view实现
<keep-alive :include="cachedViews">
<router-view :key="key"/>
</keep-alive>上传组件限制
beforeUpload钩子需返回true或Promise
beforeUpload(file) {
return new Promise((resolve, reject) => {
if(file.size > 1024) {
reject()
} else {
resolve()
}
})
}弹窗关闭问题
手动控制visible属性时需要同步修改
handleClose(done) {
this.$confirm('确认关闭?').then(() => {
done()
}).catch(() => {})
}响应式适配
布局组件使用百分比而非固定宽度
<el-row :gutter="20">
<el-col :span="6" :md="8" :sm="12"></el-col>
</el-row>图标加载优化
使用CDN方式引入图标库
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
