vue3+ts实现一个表单组件

1. 创建表单组件

首先,创建一个表单组件,包括姓名、手机号、年龄、学校、性别等基本信息的输入框,并添加省市区和街道地点的选择功能。

<template><form @submit.prevent="submitForm"><el-form :model="formData" :rules="formRules" ref="formData" label-width="100px"><el-form-item label="姓名" prop="name"><el-input v-model="formData.name"></el-input></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="formData.phone"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="formData.age"></el-input></el-form-item><el-form-item label="学校" prop="school"><el-input v-model="formData.school"></el-input></el-form-item><el-form-item label="性别" prop="gender"><el-radio-group v-model="formData.gender"><el-radio label="male"></el-radio><el-radio label="female"></el-radio></el-radio-group></el-form-item><el-form-item label="地点" prop="location"><el-radio-group v-model="locationType"><el-radio :label="'district'" @change="handleLocationTypeChange">省市区</el-radio><el-radio :label="'street'" @change="handleLocationTypeChange">街道</el-radio></el-radio-group><div v-if="locationType === 'district'"><!-- 展示省市区组件 --><el-cascaderv-model="formData.district":options="districtOptions"@change="handleDistrictChange"placeholder="请选择省市区"></el-cascader></div><div v-else-if="locationType === 'street'"><!-- 展示街道多选组件 --><el-selectv-model="formData.street"multiplefilterableremotereserve-keyword:remote-method="loadStreets"placeholder="请输入街道名称"></el-select></div></el-form-item><el-form-item><el-button type="primary" native-type="submit">提交</el-button></el-form-item></el-form></form>
</template><script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';const formData = ref({name: '',phone: '',age: undefined,school: '',gender: 'male', // 默认选项district: [], // 省市区选择结果street: [], // 街道选择结果(多选)
});const formRules = ref({name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },],age: [{ required: true, message: '请输入年龄', trigger: 'blur' },{ type: 'number', min: 1, max: 150, message: '请输入1-150之间的数字', trigger: 'blur' },],school: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],gender: [{ required: true, message: '请选择性别', trigger: 'change' }],district: [{ required: true, message: '请选择省市区', trigger: 'change' }],street: [{ required: true, message: '请选择街道', trigger: 'change' }],
});const locationType = ref('district'); // 默认选择省市区const districtOptions = ref([]); // 省市区选项// 加载街道列表
const loadStreets = async (query: string) => {try {const response = await axios.get(`/api/streets?query=${query}`);return response.data.streets.map((street: any) => ({label: street.name,value: street.id,}));} catch (error) {console.error('Error loading streets:', error);return [];}
};// 处理地点类型变化
const handleLocationTypeChange = () => {// 清空之前选择的值formData.street = [];
};// 处理省市区选择变化
const handleDistrictChange = () => {// 根据选择的省市区加载街道数据(这里可以根据实际需求进行调整)
};// 提交表单
const submitForm = async () => {try {await $refs.formData.validate();if (formData.value.locationType === 'district') {// 处理省市区数据} else if (formData.value.locationType === 'street') {// 处理街道数据}// 提交表单逻辑,例如调用后端接口console.log('Form data:', formData.value);// 使用 axios 发送表单数据到后端await axios.post('/api/submit', formData.value);} catch (error) {console.error('Submit error:', error);}
};
</script>

2. 实现数据加载和交互逻辑

在上述代码中,使用了Vue 3的Composition API结合TypeScript来管理表单数据、验证规则、组件交互等。

  • formData: 表单数据对象,包括姓名、手机号、年龄、学校、性别、省市区、街道等字段。
  • formRules: 表单验证规则,确保必填字段不能为空且格式正确。
  • locationType: 控制显示省市区选择还是街道选择的组件。
  • districtOptions: 省市区选项数据,通过后端接口获取。
  • loadStreets: 异步加载街道列表的方法,支持搜索功能。
  • handleLocationTypeChange: 处理地点类型变化的方法,清空街道选择数据。
  • handleDistrictChange: 处理省市区选择变化的方法,可以根据选择的省市区加载对应的街道数据。
  • submitForm: 提交表单的方法,包括表单验证和实际数据提交到后端接口。

3. 数据加载和提交

确保通过axios调用后端接口来获取省市区和街道数据,并在选择省市区时加载相应的街道数据。在提交表单时,将表单数据以JSON格式发送到后端处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/41640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

遗传算法求解TSP

一、基本步骤 遗传算法求解旅行商问题&#xff08;TSP&#xff09;的一般步骤如下&#xff1a; 编码&#xff1a; 通常采用整数编码&#xff0c;将城市的访问顺序表示为一个染色体。例如&#xff0c;假设有 5 个城市&#xff0c;编码为[1, 3, 5, 2, 4]&#xff0c;表示旅行商的…

Leetcode3195. 包含所有 1 的最小矩形面积 I

Every day a Leetcode 题目来源&#xff1a;3195. 包含所有 1 的最小矩形面积 I 解法1&#xff1a;遍历 设最左、最右、最上、最下的 1 的行号/列号分别为 left、right、top、bottom&#xff0c;则答案为&#xff1a;(right - left 1) * (bottom - top 1)。 代码&#xf…

新手教学系列——kswapd0 CPU占用100%问题解析与解决

在日常运维中,我们常会遇到一些疑难杂症,其中kswapd0进程CPU占用100%就是一个常见的问题。通常情况下,这个问题是因为内存耗尽,需要使用到swap空间,可以通过调整swap大小或使用比例来控制磁盘读写。然而,今天我要分享的是一个特例,如何在内存并未耗尽且swap使用比例正常…

【STM32项目】基于Stm32搞怪盒子的设计(完整工程资料)

基于stm32搞怪的盒子设计 前言&#xff1a; 最近我看到一个极具创意的搞怪盒子&#xff0c;设计得相当有意思。作为一个热衷于电子DIY的狂热爱好者&#xff0c;怎能错过这样一个有趣的项目呢&#xff1f;于是&#xff0c;我决定亲自动手&#xff0c;设计一个属于自己的、独一无…

C语言中关键字

C语言中的关键字共有32个&#xff0c;这些关键字根据其功能可以划分为以下几类&#xff1a; 1. 数据类型关键字&#xff08;12个&#xff09; char&#xff1a;声明字符型变量或函数&#xff0c;通常占用1个字节。double&#xff1a;声明双精度浮点数变量或函数&#xff0c;占…

C#面:C# 如何使⽤ ActionFilterAttribute?

在C#中&#xff0c;ActionFilterAttribute是一个特性类&#xff0c;用于在控制器的动作方法执行前后添加自定义逻辑。它可以用于实现日志记录、异常处理、权限验证等功能。 要使用ActionFilterAttribute&#xff0c;可以按照以下步骤进行操作&#xff1a; 创建一个继承自Acti…

Apache Seata分布式事务原理解析探秘

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 前言 fescar发布已有时日&#xff0c;分布式事务一直是业界备受关注的领域&#xff0c;fesca…

【carla】ubuntu安装carla环境

我们可以通过查看 CARLA 的 GitHub release 页面来找到最新版本的下载链接。 下载 CARLA 压缩包 访问 CARLA Releases 页面&#xff1a; CARLA Releases on GitHub 查找最新版本&#xff1a; 找到最新的版本&#xff0c;点击下载&#xff0c;第一个压缩包 3. 解压 CARLA 包&…

深度学习中的正则化技术 - 引言篇

序言 在深度学习中&#xff0c;正则化技术是防止模型过拟合、提升泛化能力的关键策略。随着模型复杂度的增加&#xff0c;过拟合风险也随之上升。正则化通过引入额外约束或信息&#xff0c;调整模型训练过程&#xff0c;旨在简化模型结构&#xff0c;使其学习到数据中的本质特…

VMware Workstation Pro 17.5.2 + license key

Workstation Pro是专为Windows操作系统设计的功能强大的虚拟化软件平台,它允许用户在其计算机上创建和运行虚拟机,这使他们能够同时与多个操作系统、应用程序和开发环境一起工作。 Workstation Pro的主要特点之一是其易用性,程序提供了直观的界面,允许用户轻松创建、配置和…

uabntu安装opencv

1. 安装前置依赖 sudo apt update sudo apt upgrade sudo apt install build-essential cmake git pkg-config sudo apt install libjpeg-dev libtiff-dev libpng-dev # Image libraries sudo apt install libavcodec-dev libavformat-dev libswscale-dev libv4l-dev # Vide…

RocketMQ NettyRemotingServer、NettyRemotingClient 实例化、初始化、启动源码解析

&#x1f52d; 嗨&#xff0c;您好 &#x1f44b; 我是 vnjohn&#xff0c;在互联网企业担任后端开发&#xff0c;CSDN 优质创作者 &#x1f4d6; 推荐专栏&#xff1a;Spring、MySQL、Nacos、Java&#xff0c;后续其他专栏会持续优化更新迭代 &#x1f332;文章所在专栏&#…

数学系C++ 类与对象 STL(九)

目录 目录 面向对象&#xff1a;py&#xff0c;c艹&#xff0c;Java都是,但c是面向过程 特征&#xff1a; 对象 内敛成员函数【是啥】&#xff1a; 构造函数和析构函数 构造函数 复制构造函数/拷贝构造函数&#xff1a; 【……】 实参与形参的传递方式&#xff1a;值…

Node.js Stream

Node.js Stream Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它允许开发者使用 JavaScript 编写服务器端代码。Node.js 的一个核心特性是其对流&#xff08;Stream&#xff09;的处理能力。流是一种在 Node.js 中处理读/写文件、网络通信或任何端到端…

【LeetCode】螺旋矩阵

目录 一、题目二、解法完整代码 一、题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5] 示例 2&…

go-redis 封装事件-client封装模型、批量数据处理的导出器设计

一、redis-go的封装实践-client模型 // Copyright 2020 Lingfei Kong <colin404foxmail.com>. All rights reserved. // Use of this source code is governed by a MIT style // license that can be found in the LICENSE file.package storageimport ("context&q…

MySQL性能优化 二、表结构设计优化

1.设计中间表 设计中间表&#xff0c;一般针对于统计分析功能&#xff0c;或者实时性不高的需求。 2.设计冗余字段 为减少关联查询&#xff0c;创建合理的冗余字段&#xff08;创建冗余字段还需要注意数据一致性问题&#xff09; 3.折表 对于字段太多的大表&#xff0c;考…

C++ STL容器:序列式容器-链list,forward_list

摘要&#xff1a; CC STL&#xff08;Standard Template Library&#xff0c;标准模板库&#xff09;在C编程中的重要性不容忽视&#xff0c;STL提供了一系列容器、迭代器、算法和函数对象&#xff0c;这些组件极大地提高了C程序的开发效率和代码质量。 STL 容器 分为 2 大类 …

Halcon 铣刀刀口破损缺陷检测

一 OTSU OTSU&#xff0c;是一种自适应阈值确定的方法,又叫大津法&#xff0c;简称OTSU&#xff0c;是一种基于全局的二值化算法,它是根据图像的灰度特性,将图像分为前景和背景两个部分。当取最佳阈值时&#xff0c;两部分之间的差别应该是最大的&#xff0c;在OTSU算法中所采…

排序 -- 万能测试oj

. - 力扣&#xff08;LeetCode&#xff09; 这道题我们可以使用我们学过的那些常见的排序方法来进行解答 //插入排序 void InsertSort(int* nums, int n) {for (int i 0; i < n-1; i){int end i;int tmp nums[end 1];while (end > 0){if (tmp < nums[end]){nums[…