vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】

本文依旧沿用ant design vue组件库和ts语言🔥🔥更多内容见Ant Design Vue官方文档

知识调用form表单的源代码附在文章最后

🔥🔥 vue3+ant design vue+ts实战【ant-design-vue组件库引入】
🔥 Ant Design Vue组件库——在vue项目中使用单选框 Radio

场景复现

一个功能齐全的后台管理系统一定离不开Form表单的使用form表单有很多学问从本期文章开始会详细介绍如何在项目中使用form表单、完成数据的双向绑定、各种组件的嵌套最后形成封装好了的form表单可以实现复用。

具体UI需求如下本期文章详细介绍

• 1.表单需要有输入框限制输入字数样式为文本域
• 2.表单需要有单选组合样式为垂直平铺
• 3.表单需要有按钮组合包括取消按钮和确认按钮

功能需求下期文章详细介绍

• 1.表单的值需要动态绑定
• 2.点击确认按钮控制台能够正确打印表单提交的值
• 3.点击取消按钮表单内容能够重置
• 4.点击确认按钮时检查表单输入是否有为空的部分给出相应提示

UI界面最终实现效果

实现需求

一定别忘了任何时候使用组件都需要在main.ts文件中注册才能在页面中使用。
组件的注册在《知识调用》文章中都能找到这里就不多介绍了。

form表单整体架构的搭建

form表单整体架构可以分为三个部分也就是三个form-item分别用于嵌套input输入框文本域、radiogroup垂直单选框组合、button按钮组合
html部分

<a-form
   class="form"
   name="basic"
   :model="contentFormState"
   autocomplete="off"
   >
   <p style="font-size:16px;margin-top:24px;">
     <b>给 小朱 添加一条荣誉</b>
     <!-- input输入框文本域-->
   </p>
   <a-form-item name="promotionContent">
      <p>证书内容</p>
   </a-form-item>
   <a-form-item>
      <p style="margin-top:-10px">选择 <b>小朱</b> 需要绑定的证书</p>
      <!-- radiogroup单选框组合-->
   </a-form-item>
   <a-form-item class="button-box">
      <!-- 按钮组合-->
   </a-form-item>
</a-form>

css部分可以根据需求进行调整

.form {
    margin:0 auto;
    width: 500px;
    height: 450px;
    margin-top: 15px;
    background-color: #FFFFFF;
    border: 1px solid rgba(172, 171, 171, 0.16);
    border-radius: 10px;
    position: relative;
    p {
        margin-left: 50px;
        margin-top: 20px;
        font-size: 15px;
        margin-bottom: 10px;
        font-family: "微软雅黑";
    }
    .button-box {
        position: absolute;
        bottom: -5px;
        left: 170px;
    }
}

实现效果如下

input输入框文本域的嵌套

我们需要在第一个form-item中添加input输入框文本域这里推荐使用textarea

<a-textarea
     style="width:400px;margin-left:50px"
     placeholder="请输入证书内容" 
     show-count 
     allow-clear
     :maxlength="100" 
     />

标签中属性的解释

• 1.placeholder——文本域中的初始提示字句
  
• 2.show-count——显示输入字数
  
• 3.:maxLength——绑定最大长度
• 4.allow-clear——清除按钮、点击即可清除所有输入内容
  

css样式添加在form样式中添加input输入框的样式

代码如下

    input {
        width: 400px;
        margin-left: 50px;
    }

实现效果

单选组合Radio的嵌套

html部分在第二个form-item中添加以下内容嵌套单选组合

<a-radio-group 
      name="certificatesRadioGroup"
      style="margin-top:5px"
      >
     <a-radio
           :style="radioStyle"
           v-for="item of certificatesOptionsValue" 
           v-model:value="item.options" 
           :key="item.id"
           >{{ item.options }}
      </a-radio>
</a-radio-group>

标签中属性的解释
1.:style——绑定自定义的选项样式

// 样式数据类型
interface radioStyleType {
    display:string,
    lineHeight:string,
    marginLeft:string,
    height:string,
}
// 单选框样式
const radioStyle = reactive<radioStyleType>({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
    marginLeft:'50px',
});

2.v-for——选项采用循环的方式输出

// 选择项数据类型
interface optionsType {
    id:number,
    options:string
}
// 证书选择框选择项
const certificatesOptionsValue = ref<optionsType[]>([
    {"id":1,"options":"2022年技术部年度证书"},
    {"id":2,"options":"2023年技术部年度证书"},
    {"id":3,"options":"2024年技术部年度证书"},
])

现在我们来看一下实现效果

button按钮组合的嵌套

html部分在第三个form-item中添加以下代码样式之前已经写好这里只需要设置两个按钮之前的间隔即可

<a-button>取消</a-button>
<a-button 
   type="primary" 
   style="margin-left:10px"
   >确定
</a-button>

此时我们来看看最终的实现效果

和给出的UI需求已经一模一样到目前为止页面的渲染工作已经完成。

form表单源代码

html部分

<a-form
   class="form"
   name="basic"
   :model="contentFormState"
   autocomplete="off"
   >
   <p style="font-size:16px;margin-top:24px;">
     <b>给 小朱 添加一条荣誉</b>
   </p>
   <a-form-item
      name="promotionContent"
      >
      <p>证书内容</p>
      <a-textarea
         v-model:value="contentFormState.certificates_content"
         style="width:400px;margin-left:50px"
         placeholder="请输入证书内容" 
         show-count 
         allow-clear
         :maxlength="100" 
         />
    </a-form-item>
    <a-form-item>
       <p style="margin-top:-10px">选择 <b>小朱</b> 需要绑定的证书</p>
       <a-radio-group 
          v-model:value="contentFormState.certificates_select" 
          name="certificatesRadioGroup"
          style="margin-top:5px"
          >
          <a-radio
             :style="radioStyle"
             v-for="item of certificatesOptionsValue" 
             v-model:value="item.options" 
             :key="item.id"
             >{{ item.options }}
          </a-radio>
       </a-radio-group>
    </a-form-item>
    <a-form-item class="button-box">
       <a-button @click="cancelContent()">取消</a-button>
       <a-button 
          type="primary" 
          style="margin-left:10px"
          @click="confirmContent()"
          :disabled="contentFormState.confirm == 0 ? true : false"
          >确定
       </a-button>
    </a-form-item>
</a-form>

css部分

.form {
    margin:0 auto;
    width: 500px;
    height: 450px;
    margin-top: 15px;
    background-color: #FFFFFF;
    border: 1px solid rgba(172, 171, 171, 0.16);
    border-radius: 10px;
    position: relative;
    input {
        width: 400px;
        margin-left: 50px;
    }
    p {
        margin-left: 50px;
        margin-top: 20px;
        font-size: 15px;
        margin-bottom: 10px;
        font-family: "微软雅黑";
    }
    .button-box {
        position: absolute;
        bottom: -5px;
        left: 170px;
    }
}

ts部分

import { ref, reactive } from "vue"
import { Router, useRouter } from "vue-router";

const router : Router = useRouter();
// 样式数据类型
interface radioStyleType {
    display:string,
    lineHeight:string,
    marginLeft:string,
    height:string,
}
// 单选框样式
const radioStyle = reactive<radioStyleType>({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
    marginLeft:'50px',
});

// 选择项数据类型
interface optionsType {
    id:number,
    options:string
}
// 证书选择框选择项
const certificatesOptionsValue = ref<optionsType[]>([
    {"id":1,"options":"2022年技术部年度证书"},
    {"id":2,"options":"2023年技术部年度证书"},
    {"id":3,"options":"2024年技术部年度证书"},
])

---

当然现在实现的只是UI界面真正核心的是数据的动态绑定让表单每个部分的值能够存储在变量当中从而进一步实现后续的提交与重置功能。

---

vue项目实战中关于Form表单用法有很多后期会不定期更新~ 感兴趣的小伙伴可以订阅本专栏方便后续了解学习~ 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~