Vue+Ele特殊表單校驗(yàn)

一個(gè)數(shù)組v-for循環(huán)渲染form項(xiàng),限制每一項(xiàng)表單的樣式

<ElForm
    :model="form"
     label-width="100px"
     ref="form">
        <ElFormItem
          v-for="(v, k) in form.msg_config"'
          :key="k"
          label="跳轉(zhuǎn)鏈接"
          :prop="`msg_config[${k}].redirect_url`"
          :rules="[{required: true, message: '請(qǐng)?zhí)顚懱D(zhuǎn)鏈接', trigger: 'blur'}]">
          <ElInput v-model="form.msg_config[k].redirect_url" placeholder="請(qǐng)輸入跳轉(zhuǎn)鏈接"></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>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,178評(píng)論 0 29
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計(jì)架構(gòu)和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 3,155評(píng)論 1 4
  • 完整版推薦在線閱讀 https://interview2.poetries.top/[https://interv...
    前端進(jìn)階之旅閱讀 3,665評(píng)論 2 20
  • 1.Vue基礎(chǔ)語法 Vue 是什么? Vue (讀音 /vju?/,類似于 view) 是一套用于構(gòu)建用戶界面的漸...
    Scincyc閱讀 502評(píng)論 0 1
  • 1.安裝 可以簡(jiǎn)單地在頁面引入Vue.js作為獨(dú)立版本,Vue即被注冊(cè)為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,300評(píng)論 4 129

友情鏈接更多精彩內(nèi)容