开这个贴的目的
记录一下使用Element UI时遇到坑,持续更新...
使用table组件遇到的坑
fixed关键字
fixed关键字会使得
1.根据自己的使用习惯,对elementUI的select选择器再进行一次封装,形成了一个通用的comboBox组件(代码如下),这个组件会在prop中传入动态的dictValue值,该组件本身也有selectValue变量值(该值初始化时会读取dictValue值)。在使用table组件时,同时在table里面通过slot插槽自定义了该组件的使用
2.当父组件的dictValue值在外部发生变化时(即不是人为对组件进行选择的情况,例如数据更新了),此时comboBox组件里面将会根据的watch对dictValue计算监控变化从而调用方法,根据上面的描述,因为
渲染了两次,此时将会调用用两次watch里面的dictValue的方法 3.假如要对watch里面的dictValue方法中添加一些可重复累计的业务逻辑,将会造成很严重的问题,因此将要注意这个问题
4.目前百度了关键字【element table fixed渲染多次】也会发现有这个情况,目前的建议只有是去掉fixed关键字才能解决,所以在实际的使用情况中就要注意了
<template>
<el-select v-model="selectValue"
@change="changeVal"
clearable
:disabled="disabled"
:placeholder="placeholder"
style="width: 100%"
>
<el-option
v-for="item in this.$store.state.system.sysDict"
v-if="item.codeName == codeName"
:key="item.value"
:label="item.codeText"
:value="item.codeValue">
</el-option>
</el-select>
</template>
<script>
export default {
name: "DictSelect",
props:{
codeName:{type:String},
placeholder:{type: String,default:"请选择"},
dictValue:{},
disabled:{type:Boolean,default: false}
},
data(){
return {
selectValue: this.dictValue
}
},
methods:{
changeVal(val){
this.$emit("update:dictValue",val);
}
},
watch:{
dictValue(newVal,oldVal){
this.selectValue = newVal
}
},
}
</script>
使用form组件遇到的坑
el-select和el-input宽度不一致问题
-
不使用行内表单inline属性时
手动设置el-select的width=100%即可(因为一般还会对el-select进行二次封装,以适应自己的使用,此问题可以解决)
<el-select ...忽略其余属性 style="width: 100%" > ...此处忽略 </el-select>
-
使用行内表单
可以对每个el-input添加属性suffix-icon="xxx"(xxx就是不存在的icon,究其原因就是因为el-select多了图标的占位,导致不能对齐)
另外的方法就是对el-input统一设置css来进行padding,百度了一下,好像还没有解决方法,好像也没有人在意这个...
resetFields不生效的原因
-
在dialog中打开时不生效
此时dom尚未渲染完成,需要必须在渲染完成以后才调用resetFields,所以使用nextTick在dom更新完成以后才进行重置
this.$nextTick(()=>{ this.$refs.xxx.resetFields();//xxx为表单名,表单属性必须设置ref=xxx })
-
设置prop
需要对每个el-form-item都添加prop,否则无法生效
-
使用v-if隐藏的字段无法清空
v-if会影响dom节点的创建,换句话说就是v-if=true的数据是真的没有渲染到页面能上的,因此无法被resetFields清理,解决这种情况,使用v-show来进行隐藏即可