vue BasicForm修改单个项值_basicform 变化schemas-优快云博客

文章展示了如何在Naiveadmin框架中使用BasicForm组件来创建搜索表单，包括NDatePicker、NSelect、NTreeSelect和NInput等组件的配置和交互，如字段绑定、事件监听以及表单验证规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

naiveadmin 框架表单搜索常用BasicForm组件

<BasicForm
      ref="form"
      size="small"
      @register="register"
      @submit="handleSubmit"
      @reset="handleReset"
    >
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

const [register, {}] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 130,
    schemas: schemas.value,
  });

const schemas = ref([
    {
      field: 'date',
      component: 'NDatePicker',
      label: '时间：',
      componentProps: {
        placeholder: '',
        defaultValue: Date.parse(format(new Date(), 'yyyy-MM')),
        type: 'month',
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'houseId',
      component: 'NSelect',
      label: '仓库：',
      componentProps: {
        filterable: true,
        valueField: 'id',
        labelField: 'name',
        placeholder: '请选择',
        onInput: (e: any) => {
          console.log(e);
        },
        onUpdateValue: (e: any) => {
          getLocationOptions(e);
          form.value.formModel.spaceId = '';
        },
      },
    },
    {
      field: 'spaceId',
      component: 'NSelect',
      label: '位置：',
      componentProps: {
        filterable: true,
        valueField: 'id',
        labelField: 'name',
        placeholder: '请选择',
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'name',
      component: 'NTreeSelect',
      label: '名称：',
      componentProps: {
        filterable: true,
        defaultExpandAll: true,
        keyField: 'id',
        labelField: 'name',
        placeholder: '请选择',
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'natureId',
      component: 'NTreeSelect',
      label: '性质：',
      componentProps: {
        filterable: true,
        defaultExpandAll: true,
        keyField: 'id',
        labelField: 'name',
        placeholder: '全部',
        options: [],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'year',
      component: 'NInput',
      label: '年度：',
      componentProps: {
        placeholder: '请输入',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      rules: [
        {
          required: false,
          validator(rule: FormItemRule, value: string) {
            if (value && !/^\d{4}$/.test(value)) {
              return new Error('只能为四位数字');
            }
            return true;
          },
          trigger: ['input', 'blur'],
        },
      ],
    },
  ]);

处理表单中某个项得值：

form.value.formModel.spaceId = '';

form：BasicForm的ref

spaceId：项的field