快捷導(dǎo)航

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

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

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

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

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

【代碼】：通過(guò)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>

其他通過(guò)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)文章

vue 父組件調(diào)用子組件方法及事件
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來(lái)創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個(gè)功能呢？接下來(lái)跟隨腳本之家小編一起看看吧
2018-03-03
Vuex 單狀態(tài)庫(kù)與多模塊狀態(tài)庫(kù)詳解
這篇文章主要介紹了Vuex 單狀態(tài)庫(kù)與多模塊狀態(tài)庫(kù)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無(wú)刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下
2019-11-11
Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現(xiàn)在越來(lái)越多的項(xiàng)目開(kāi)始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟，感興趣的可以了解一下
2021-07-07
vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-04-04
Vue2幾種常見(jiàn)開(kāi)局方式詳解
這篇文章主要為大家詳細(xì)介紹了Vue2幾種常見(jiàn)開(kāi)局方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
vue（2.x，3.0）配置跨域代理
這篇文章主要介紹了vue（2.x，3.0）配置跨域代理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue使用自定義指令來(lái)控制頁(yè)面按鈕組的權(quán)限思想
這篇文章主要介紹了vue使用自定義指令來(lái)控制頁(yè)面按鈕組的權(quán)限思想，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue.js入門(mén)教程之基礎(chǔ)語(yǔ)法小結(jié)
這篇文章我們將學(xué)習(xí)vue.js的基礎(chǔ)語(yǔ)法，對(duì)于大家學(xué)習(xí)vue.js具有一定的參考借鑒價(jià)值，有需要的朋友們下面來(lái)一起看看。
2016-09-09