美文网首页
Vue+Ele特殊表单校验

Vue+Ele特殊表单校验

作者: 深情的白杨 | 来源:发表于2021-06-28 19:33 被阅读0次

一个数组v-for循环渲染form项,限制每一项表单的样式

<ElForm
    :model="form"
     label-width="100px"
     ref="form">
        <ElFormItem
          v-for="(v, k) in form.msg_config"'
          :key="k"
          label="跳转链接"
          :prop="`msg_config[${k}].redirect_url`"
          :rules="[{required: true, message: '请填写跳转链接', trigger: 'blur'}]">
          <ElInput v-model="form.msg_config[k].redirect_url" placeholder="请输入跳转链接"></ElInput>
        </ElFormItem>
</ElForm>

<ElBreadcrumb separator-class="el-icon-arrow-right">
<template v-for="(item, index) in $route.matched">
<ElBreadcrumbItem :key="index">
<span v-if="item.meta && item.meta.isTxt">{{ item.path ? item.meta.title : '首页' }}</span>
<RouterLink v-else :to="item.path || '/'">
{{ item.path ? item.meta.title : '首页' }}
</RouterLink>
</ElBreadcrumbItem>
</template>
</ElBreadcrumb>

相关文章

网友评论

      本文标题:Vue+Ele特殊表单校验

      本文链接:https://www.haomeiwen.com/subject/juhcultx.html