vben-Admin 框架--表单问题汇总

前言

最近开发项目都是基于vben框架开发,从中遇到很多有趣的问题,为了以后方便方便查找,于是以此博文记录
一、 表格表单

  1. 在表格中开启表单
 const [registerTable, { getForm, reload }] = useTable({
        useSearchForm: true, // 是否显示顶部搜索表单
        formConfig: {
          labelWidth: 100, // 表单label宽度
          schemas, // 在data.ts中定义的表单数据
          showAdvancedButton: true,
        },
 })
  1. 表格表单中定义插槽
    适用于默认的表单类型满足不了我们的需求就需要自己用插槽写法写我们自己的表单内容
    第一步在 .data中定义插槽
{
    field: 'processDay',
    label: '使用率',
    component: 'Input',
    slot: 'processDay', // 插槽name
    colProps: {
      span: 10,
    },
  },

第二步在BasicTable 中 引入插槽

<BasicTable title="列表" @register="registerTable">
      <template #form-processDay>  // 插槽名
        <a-input-group compact>
          <a-select
            @change="change"
            v-model:value="type"
            style="width: 120px; text-align: center"
            :options="compactOption"
            placeholder="请选择"
          >
          </a-select>
          <a-input-number
            :min="0"
            :max="100"
            v-model:value="minPercent"
            style="width: 120px; text-align: center"
            placeholder="大于值"
          />
          <a-input
            style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff"
            placeholder="~"
            disabled
          />
          <a-input-number
            v-model:value="maxPercent"
            :min="1"
            :max="100"
            style="width: 120px; text-align: center; border-left: 0"
            placeholder="小于值"
          />
        </a-input-group>
      </template>

第三步 数据交互

setup() {
      const compactOption = ref([
        { label: '移动', value: '1' },
        { label: '联通', value: '2' },
        { label: '电信', value: '3' },
      ]);
      const type = ref<string>();
      const minPercent = ref<string>('');
      const maxPercent = ref<string>('');
      const [registerTable, { getForm }] = useTable({
        api: getApiList,
        // 请求之前 插槽数据进行绑定
        beforeFetch: (data) => {
          if (type.value) {
            data.type = type.value;
          }
          if (minPercent.value || minPercent.value == '0') {
            data.minPercent = minPercent.value;
          }
          if (maxPercent.value) {
            data.maxPercent = maxPercent.value;
          }
          return data;
        },
        formConfig: {
          labelWidth: 80,
          schemas,
          showAdvancedButton: false,
          resetFunc: customResetFunc, // 单独定义重置方法 须情况插槽表单内容
        },
      });
      // 重置方法--单独清空插槽表单内容
      async function customResetFunc() {
        type.value = undefined;
        minPercent.value = maxPercent.value = '';
      }

效果图:
在这里插入图片描述

二、 表单

  1. 表单值的动态变化
    场景 当表单中的某一项需要请求接口,而接口参数依赖于表单中的某一项的值
    通过formModel 拿到其他表单项的值
{
    field: 'layer',
    label: '层级',
    component: 'ApiSelect',
    required: true,
    componentProps: ({ formActionType, formModel }) => {
      return {
        mode: 'multiple',
        api: Hierarchy, // 接口
        // 接口参数
        params: {
          site: formModel.site || '',
          placeId: formModel.placeId|| '',
        },
        resultField: 'result',
        labelField: 'layer',
        valueField: 'layer',
        showSearch: true,
      };
    },
  },
  1. 表单某一项值变化改变某一项的状态做相应的处理
    通过onChange 可以在当前值发生变化后做相应处理,updateSchema 更新表单设置,若更新多个updateSchema ([{},{}])
{
    field: 'site',
    label: '网站',
    component: 'Select',
    required: true,
    componentProps: ({ formModel, formActionType }) => {
      return {
        options: [
		    { label: '移动', value: '1' },
		    { label: '联通', value: '2' },
		    { label: '电信', value: '3' },
		],
        onChange: async (e: any) => {
          const data = await getPrebindList({
            website: e,
          });
          const maxNum = data?.result?.count;
          const { updateSchema } = formActionType;
          updateSchema({
            field: 'taskNum',
            component: 'InputNumber',
            componentProps: {
              max: maxNum,
              min: 0,
            },
          });
        },
      };
    },
  },
  1. 在某一项表单内容发生变化时,清空某一项表单的值
    采用setFieldsValue方法
{
    field: 'deviceType',
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getFacilityList,
        resultField: 'rows',
        labelField: 'attrName',
        valueField: 'attrId',
        optionFilterProp: 'label',
        placeholder: '请选择设备类型',
        onChange: (e: any) => {
        // 当deviceType的值发生变化时,清空deviceAttrId的值--getFieldsValue获取当前表单字段属性
         if (Reflect.has(getFieldsValue(), 'deviceAttrId')) {
           setFieldsValue({
             deviceAttrId: '',
           });
         }
        },
      };
    },
  },

ps: 今天就先写这么多,最近公司项目都采用vben开发,vue3+Ts模式,后面估计还会遇到更多问题,等遇到了再总结

  • 11
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-vben-admin是一个基于Vue.js和Ant Design Vue的开源管理后台模板,它提供了丰富的功能和组件,能够快速搭建出符合业务需求的管理后台系统。 vue-vben-admin的中文文档提供了详细的使用说明和示例,帮助开发者快速上手和了解项目的使用方式。文档按照功能模块和组件进行分类,全面介绍了框架的各个方面。无论是对于初学者还是有一定经验的开发者来说,这些文档都是非常有用的。 文档首先介绍了项目的基本结构和搭建方式,包括安装和配置相关的环境和依赖。然后详细介绍了项目的目录结构和文件的作用,让开发者能够快速理解和定位项目中的文件和代码。 接着,文档介绍了项目中涉及的各种功能和组件的使用方法,如路由配置、权限管理、表格、表单、图表等等。每个功能或组件都提供了详细的说明、示例和代码片段,让开发者能够快速理解和掌握使用方式。 此外,文档还提供了一些常见问题的解答和注意事项,帮助开发者避免一些常见的错误和问题。文档还包括了一些实际项目中的案例和最佳实践,为开发者提供了一些指导和思路。 总的来说,vue-vben-admin的中文文档非常全面和详细,对于使用该模板的开发者来说是非常有帮助的。无论是对于初学者还是有经验的开发者来说,都能够在文档中找到自己需要的信息和解决方案。同时,文档还提供了丰富的示例和代码片段,让开发者能够更快地上手和实践。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值