循环el-form-item并动态(表达式)显示el-input的内容

要点:把el-input的v-model改成value就可以写表达式从而动态显示了

        <el-form ref="form" label-width="80px">
          <el-form-item
            v-for="item in infoList"
            :key="item.name"
            class="info"
            :label="item.name"
         >
            <el-input v-if="item.name === '建筑类型'" :value="item.value === '0' ? '图书馆' : '体育馆'" style="width: 50%" disabled></el-input>
            <el-input v-else v-model="item.value" style="width: 50%" disabled />
          </el-form-item>
        </el-form>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在表单中使用 el-input 进行链接校验,需要使用 el-form 中的自定义校验规则(custom validator)功能。 首先,在 el-form 中定义一个自定义校验规则,在该规则中使用正则表达式对输入进行校验。例如,以下代码将校验输入的是否为链接: ```html <el-form :model="form" :rules="rules"> <el-form-item label="链接"> <el-input v-model="form.link"></el-input> </el-form-item> </el-form> ``` ```javascript data() { return { form: { link: '' }, rules: { link: [ { required: true, message: '请输入链接', trigger: 'blur' }, { validator: (rule, value, callback) => { const pattern = /^https?:\/\/[\w\-]+(\.[\w\-]+)+[/#?]?.*$/; if (value && !pattern.test(value)) { callback(new Error('请输入有效的链接')); } else { callback(); } }, trigger: 'blur' } ] } }; } ``` 在上述代码中,自定义校验规则使用 validator 函数进行校验。该函数接受三个参数:rule、value 和 callback。其中,rule 是当前校验规则的配置对象,value 是当前输入框的,callback 是校验结果的回调函数。在 validator 函数中,使用正则表达式对输入进行校验,如果校验失败,则调用 callback 函数返回一个 Error 对象,否则调用 callback 函数不带参数即可。在 el-form-item 中设置 trigger 属性为 'blur',表示在输入框失去焦点时触发校验。 这样,当用户在输入框中输入链接时,如果链接不符合正则表达式的规则,表单会提示用户输入有效的链接。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值