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

前言

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

1. 在表格中开启表单

 const [registerTable, { getForm, reload }] = useTable({
        useSearchForm: true, // 是否显示顶部搜索表单
        formConfig: {
          labelWidth: 100, // 表单label宽度
          schemas, // 在data.ts中定义的表单数据
          showAdvancedButton: true,
        },
 })

2. 表格表单中定义插槽
   适用于默认的表单类型满足不了我们的需求就需要自己用插槽写法写我们自己的表单内容
   第一步在 .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,
      };
    },
  },

2. 表单某一项值变化改变某一项的状态做相应的处理
   通过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,
            },
          });
        },
      };
    },
  },

3. 在某一项表单内容发生变化时，清空某一项表单的值
   采用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模式，后面估计还会遇到更多问题，等遇到了再总结