• 开这个贴的目的
• 使用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来进行隐藏即可