木灵鱼儿

木灵鱼儿

阅读:623

最后更新:2021/06/16/ 10:31:36
关于element 表单选项必填,然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

关于element 表单选项必填,然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

主要问题还是因为样式的问题,实际上嵌套的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覆盖。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 623

相关文章