目录
开这个贴的目的
使用 table 组件遇到的坑
fixed 关键字
使用 form 组件遇到的坑
el-select 和 el-input 宽度不一致问题
resetFields 不生效的原因
开这个贴的目的
记录一下使用 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 来进行隐藏即可
来源: http://www.bubuko.com/infodetail-3802296.html