快捷導(dǎo)航

vue表格n-form中自定義增加必填星號(hào)的實(shí)現(xiàn)代碼

更新時(shí)間：2024年12月18日 12:06:48 作者：番茄小醬001

這篇文章主要介紹了vue表格n-form中自定義增加必填星號(hào),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

【如上圖所示】：自定義增加星號(hào)樣式

【思路】：通過插槽實(shí)現(xiàn)

【代碼】：通過vue的插槽實(shí)現(xiàn)自定義樣式

 
 <n-form-item-gi label="提示函正文" path="fileList" :span="12">
              <template #label>
                <div>
                  提示函正文
                  <span class="text-[red]">*</span>
                </div>
              </template>
 </n-form-item-gi>

其他通過rules的校驗(yàn)規(guī)則如下：

<n-form
    ref="addFormRef"
    :model="state.add"
    :rules="addFormRules"
     label-placement="top"
    require-mark-placement="right"
>
 <n-form-item-gi label="XXX" path="demo" :span="12"></n-form-item-gi>
</ n-form>
//  js語(yǔ)法
const addFormRules = ref<FormRules>({
  demo: {
    required: true,
    message: '請(qǐng)輸入XXX',
    trigger: ['input', 'blur'],
  },
})

到此這篇關(guān)于vue表格n-form中自定義增加必填星號(hào)的文章就介紹到這了,更多相關(guān)vue表格n-form必填星號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例
今天小編就為大家分享一篇vue2.x 通過后端接口代理,獲取qq音樂api的數(shù)據(jù)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2019-10-10
詳解vue過度效果與動(dòng)畫transition使用示例
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果，Vue 提供了內(nèi)置的過渡封裝組件transition，該組件用于包裹要實(shí)現(xiàn)過渡效果的組件
2021-10-10
使用Vue構(gòu)建動(dòng)態(tài)表單生成器的實(shí)現(xiàn)步驟
在前端開發(fā)中,表單是非常常見的交互元素,然而,當(dāng)表單的結(jié)構(gòu)和字段需要根據(jù)不同的業(yè)務(wù)場(chǎng)景動(dòng)態(tài)變化時(shí),手動(dòng)編寫每個(gè)表單的代碼會(huì)變得非常繁瑣,所以我們可以使用Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)表單生成器,本文將詳細(xì)介紹實(shí)現(xiàn)動(dòng)態(tài)表單生成器的原理,需要的朋友可以參考下
2025-04-04
vue圖片裁剪插件vue-cropper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-05-05
vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼詳解
這篇文章主要介紹了vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
解決vue一個(gè)頁(yè)面中復(fù)用同一個(gè)echarts組件的問題
這篇文章主要介紹了解決vue一個(gè)頁(yè)面中復(fù)用同一個(gè)echarts組件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2020-07-07
Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實(shí)現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個(gè)函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下
2023-05-05
在vant 中使用cell組件定義圖標(biāo)該圖片和位置操作
這篇文章主要介紹了在vant 中使用cell組件定義圖標(biāo)該圖片和位置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2020-11-11
elementui?Select選擇器嵌套tree實(shí)現(xiàn)TreeSelect方式
這篇文章主要介紹了elementui?Select選擇器嵌套tree實(shí)現(xiàn)TreeSelect方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10