vue & element-ui的一些记录

1,405 阅读1分钟

1. el-table的v-show没有作用

<el-table-column>上使用v-show的时候,发现没有起到作用,对应的列并没有隐藏。

这里的解决方案是:将<v-show>改为<v-if>

2. el-select选项的value设置为对象

这里遇到的报错是: [Vue warn]: <transition-group> children must be keyed: <ElTag>

原因是使用<el-select>如果value的值希望是一个对象的话,它本身是不会认对象值的,需要在<el-selcect>那里加一个这个对象的唯一标识,必须是对象的某个字段,比如id

正确用法:

<el-select v-model="model" value-key="id" >
    <el-option
        v-for="item in list"
        :key="item.id"
        :label="item.name"
        :value="item">
    </el-option>
</el-select>

3. vue父子传值是Boolean的情况

如果传的boolean值不作为data里的某一项而是直接写在子组件上的话,如果直接使用true\false\"true"\"false这几个都会报相同的错误:

type check failed for prop "XXX". Expected Boolean, got String.

正确用法,改为绑定型

<child :someprop="true"></child>
<a-child :anotherprop="false"></a-child>

或者true的情况也可以直接省略

<child someprop></child>