vue表格n-form中自定义增加必填星号的实现代码

 更新时间:2024年12月18日 12:06:48   作者:番茄小酱001  
这篇文章主要介绍了vue表格n-form中自定义增加必填星号,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

【如上图所示】:自定义增加星号样式

【思路】: 通过插槽实现

【代码】:通过vue的插槽实现自定义样式

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

其他通过rules的校验规则如下:

<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语法
const addFormRules = ref<FormRules>({
  demo: {
    required: true,
    message: '请输入XXX',
    trigger: ['input', 'blur'],
  },
})

到此这篇关于vue表格n-form中自定义增加必填星号的文章就介绍到这了,更多相关vue表格n-form必填星号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 父组件调用子组件方法及事件

    vue 父组件调用子组件方法及事件

    这篇文章主要介绍了vue 父组件调用子组件方法及事件的相关资料,父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.怎么实现这样一个功能呢?接下来跟随脚本之家小编一起看看吧
    2018-03-03
  • Vuex 单状态库与多模块状态库详解

    Vuex 单状态库与多模块状态库详解

    这篇文章主要介绍了Vuex 单状态库与多模块状态库详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Vue+axios封装请求实现前后端分离

    Vue+axios封装请求实现前后端分离

    这篇文章主要为大家详细介绍了Vue+axios封装请求实现前后端分离,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue ajax 拦截原理与实现方法示例

    vue ajax 拦截原理与实现方法示例

    这篇文章主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下
    2019-11-11
  • Vite创建项目的实现步骤

    Vite创建项目的实现步骤

    随着 Vite2 的发布并日趋稳定,现在越来越多的项目开始尝试使用它。本文我们就介绍了Vite创建项目的实现步骤,感兴趣的可以了解一下
    2021-07-07
  • vue组件中使用props传递数据的实例详解

    vue组件中使用props传递数据的实例详解

    这篇文章主要介绍了vue组件中使用props传递数据的实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Vue2几种常见开局方式详解

    Vue2几种常见开局方式详解

    这篇文章主要为大家详细介绍了Vue2几种常见开局方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • vue(2.x,3.0)配置跨域代理

    vue(2.x,3.0)配置跨域代理

    这篇文章主要介绍了vue(2.x,3.0)配置跨域代理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue使用自定义指令来控制页面按钮组的权限思想

    vue使用自定义指令来控制页面按钮组的权限思想

    这篇文章主要介绍了vue使用自定义指令来控制页面按钮组的权限思想,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue.js入门教程之基础语法小结

    vue.js入门教程之基础语法小结

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看。
    2016-09-09

最新评论