vben admin / ant design 的 Form表单获取/设置/清空某个表单项的值 , 使用 setFieldsValue 设置某个字段的时候,表单被清空的解决方案

原创

已于 2023-03-11 11:23:50 修改 · 7.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-03-10 15:28:54 首次发布

文章讲述了在Vue3+TS项目中使用Vben框架时遇到的一个问题，即如何在客户下拉列表选择变化时清空关联的工地下拉列表，同时保持其他表单字段不变。作者通过尝试和错误找到了解决方案，涉及到表单字段的值管理，包括使用setFieldsValue可能导致的其他字段被清空的问题，以及使用深拷贝来避免这个问题。

项目场景：

项目当中用了 vben 框架, vben 是基于 ant design 封装的,项目中有个需求是一个筛选表单,其中筛选条件中通过下拉列表来完成,两个筛选下拉列表有着联动关系

在这里插入图片描述上图是期望的实现结果,客户和工地有着层级关系,当客户切换,对应工地列表会重新加载,而且选中状态清空,其他的选项不变

问题描述

这里在写的时候,一开始的思路是在所属客户的选中事件中清空工地这个字段的值
但是 vue3 + ts 是真的真的不熟悉啊啊啊啊

总之来看看代码叭

    <div class="bg-white mb-2 p-4">
      <BasicForm @register="registerForm" ref="formRef" />
    </div>

//过滤表单相关的代码
  const searchSchemas: FormSchema[] = [
    {
   
   
      field: 'state',
      component: 'Select',
      label: '设备状态',
      colProps: {
   
    span: 4 },
      componentProps: {
   
   
        allowClear: true,
        dictType: 'bu_device_status',
      },
    },
    {
   
   
      field: 'name',
      component: 'Input',
      colProps: {
   
    span: 4 },
      label: '设备名称'