element-ui 表單v-if 很多人會遇到無法驗證的問題,網上很多是在el-form-item標簽前加一個div然后把v-if拿到div上去像這樣
<div v-if="addchannel.region=='postgresql'||addchannel.region=='mongodb'||addchannel.region=='mysql'||addchannel.region=='influxdb'" class="notlastchildren notline"> <el-form-item :label="addchannel.region+'密碼'" label-width="200px" prop="postgresqlpassword" :rules='[ {required:true,message:"密碼不能為空",trigger: "blur"} ]' > <el-input :type="pwdType" placeholder="密碼" v-model="addchannel.postgresqlpassword" class="notauto readonly" readonly > <template slot="append"> <span class="show-pwd" @click="showPwd"> <svg-icon :icon-class="isopen" /> </span> </template> </el-input> </el-form-item> </div>
這樣也有可能不行,其實再套一層div就可以了
<div v-if="addchannel.region=='postgresql'||addchannel.region=='mongodb'||addchannel.region=='mysql'||addchannel.region=='influxdb'" class="notlastchildren notline"> <div> <el-form-item :label="addchannel.region+'密碼'" label-width="200px" prop="postgresqlpassword" :rules='[ {required:true,message:"密碼不能為空",trigger: "blur"} ]' > <el-input :type="pwdType" placeholder="密碼" v-model="addchannel.postgresqlpassword" class="notauto readonly" readonly > <template slot="append"> <span class="show-pwd" @click="showPwd"> <svg-icon :icon-class="isopen" /> </span> </template> </el-input> </el-form-item> </div> </div>