Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件

 系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入

Header响应式菜单缩展

Mockjs引用与Axios封装

登录设计

登录成功跳转主页

多用户动态加载菜单

Pinia持久化

动态路由 -动态增加路由

动态路由-动态删除路由 

路由守卫-无路由跳转404

 路由守卫-未登录跳转登录界面

 登录退出

Tags-组件构建

Tags-与菜单联动 

Pinia持久化优化

按钮权限

客制按钮组件

客制Table组件

客制Form组件

国际化

配置文件

---

文章目录

目录

 系列文档目录

文章目录

前言

子组件-Form组件构建

 父组件-Form组件调用

演示效果

​编辑

模拟测试

父组件-Form组件多界面

后续

代码下载 

---

前言

        在实际项目开发中，表单（Form）的数据编辑功能是常见需求。为了提高开发效率，本章节将重点介绍如何对表单组件进行封装，从而实现快速开发。

---

子组件-Form组件构建

创建文件：  components/ActionFormCont.vue  

实现功能：

1. 栏位定义： 控件配置由父组件传入，控件可自定义隐藏。

2. 数据来源： 控件数据由父组件提供。

3. 帅选功能： 数据选择由父组件提供。

4. 数据检证： 数据验证由父组件提供。

 父组件-Form组件调用

组件控件定义：

姓名：增加数据验证

性别：有下选框

const fields = ref([
  {
    prop: "name",
    label: "姓名",
    width: 200,
    hide: false,
    ReadOnly: false,
    InputType: "text",
    IsNull: false,
    Validation: {
      validator: nameValidator,
      trigger: "blur",
    },
  },
  {
    prop: "age",
    label: "年龄",
    width: 200,
    hide: false,
    ReadOnly: false,
    InputType: "text",
    IsNull: true,
  },
  {
    prop: "gender",
    label: "性别",
    width: 200,
    hide: false,
    ReadOnly: false,
    InputType: "select",
    options: [
      { label: "男", value: "male" },
      { label: "女", value: "female" },
    ],
    IsNull: false,
  },
  {
    prop: "birthDate",
    label: "出生日期",
    width: 200,
    hide: false,
    ReadOnly: false,
    InputType: "date",
    IsNull: true,
  },
]);

const handleAdd = () => {
  formData.value = {
    name: "默认姓名",
   
  };
  dialogVisible.value = true;
};

完整代码： 

说明：该功能演示按钮未引用自定义组件

功能说明：
• 新增：新增时自动填充默认值，其余字段保持空白。

• 编辑：加载全部数据进行编辑。

• 保存：进行数据验证（包括长度检查和非空校验），若验证通过则保存数据。

• 取消：关闭当前窗口。

演示效果

模拟测试

保存时，获取资料正确。

验证测试已通过，此处暂不提供截图

父组件-Form组件多界面

在原有功能基础上，新增一个“新增明细”按钮，点击后可实现明细数据的新增操作。

多界面演示

 

---

后续

  下一章讲解国际化

代码下载 

GitCode - 全球开发者的开源社区,开源代码托管平台GitCode是面向全球开发者的开源社区,包括原创博客,开源代码托管,代码协作,项目管理等。与开发者社区互动,提升您的研发效率和质量。https://gitcode.com/sen_shan/ssVue3Demo.gitss.vue3.demo: 本项目以 Vue3、Vite、TypeScript、Element Plus 为核心框架，结合 Vue Router、Element Plus Icons、Less、Axios、Pinia、Mock 等技术，初始的构建登录，主界面，权限控制，按钮组件，table组件，form组件等小模型，可以随意搭建web管理系统https://gitee.com/sen_shan/ssVue3Demo.git