element-ui使用时的一些坑点总结

1、el-select 下拉框绑定值为对象时选中值显示错乱。如下图,所有下拉选项都是选中状态而且不管怎么选,下拉框显示的值一直是最后一个选项
在这里插入图片描述
解决办法:加上value-key属性 官网也有介绍,当绑定值是对象类型是必填
在这里插入图片描述
代码如下,其中value-key属性的值为数据源数组元素中的唯一键。例如下面的id,如果其他字段的值也是唯一确定的,如reserve1,那么value-key的值也可以是reserve1

<el-select v-model="goodsForm.currency" value-key="id" placeholder="请选择"
                               @change="changeCurrencySymbol">
                        <el-option
                                v-for="item in currencyList"
                                :key="item.id"
                                :label="item.reserve1"
                                :value="item">
                        </el-option>
                    </el-select>

2、局部覆盖element-ui的默认样式
解决办法:在需要更改的组件里新增一个style标签【重点:不要加scoped】,然后直接获取class设置样式就可以,记住给class加上能限制范围的父层选择器,不然设置的样式会全局生效

3、el-form 标签绑定data中的form时候,请使用:model=“form” 而不是v-model=“form”,不然表单校验会不起作用
在这里插入图片描述
原因就是el-form的具有自己封装的model属性,表示表单数据对象

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值