使用vue时遇到的问题

开这个贴的目的

记录一下使用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来进行隐藏即可

使用vue时遇到的问题

上一篇:1001 A+B Format (20 分)


下一篇:[Vue]-03-vueRouter