关于element 表单选项必填,然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法
![关于element 表单选项必填,然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法](https://mulingyuer-1253375624.cos.ap-guangzhou.myqcloud.com/%E5%9B%BE%E7%89%87%E7%A9%BA%E9%97%B4/%E5%85%B3%E4%BA%8Eelement%20%E8%A1%A8%E5%8D%95%E9%80%89%E9%A1%B9%E5%BF%85%E5%A1%AB%EF%BC%8C%E7%84%B6%E5%90%8E%E5%B5%8C%E5%A5%97%E4%B8%80%E4%B8%AAel-form%E5%AF%BC%E8%87%B4%E8%BF%99%E4%B8%AA%E5%B5%8C%E5%A5%97%E7%9A%84%E5%85%A8%E9%83%A8%E9%83%BD%E6%98%AF%E5%BF%85%E5%A1%AB%E7%9A%84%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95.jpg!Anti_theft)
主要问题还是因为样式的问题,实际上嵌套的el-form如果正确配置了数据,如:model、rules、prop
,那么如果rules里面没有配置必填,那么是不会有必填的效果的,只是因为受到父组件必填的样式影响。
我们先看下官方的选择器:
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before
拆分成两条:
第一条:
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before
第二条:
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before
仔细看,可以看出,第二条是绝对不会出问题的,因为他使用得了>
子选择器,唯一有问题就是第一条,他的.el-form-item__label-wrap
可以是子,也可以是孙,只要是在el-form-item
下面。
正因为它,导致我们嵌套的el-form所有的选项都有了必填的星号显示。
el-form-item__label-wrap什么时候出来的?
当el-form的label-width属性设为auto的时候,也就说,如果你设置一个固定的宽度,100px啥的,就可以不受这个星号的样式影响了。
暂时也不知道官方是估计这样写的样式还是咋的,反正label-width属性设为auto的时候,并没有看到层级发生了什么变化。
所以,目前最好的办法就是设置label-width为固定的值,或者,自己css覆盖。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据