Vue+Ele特殊表单校验

2021-06-28  本文已影响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>

上一篇 下一篇

猜你喜欢

热点阅读