Naive UI 之 BasicForm NDatePicker_basicform vue3 onupdatevalue-优快云博客

本文链接：https://blog.youkuaiyun.com/aliceyang2012/article/details/129280171

文章展示了如何在列表数据过滤中使用NInput、NSelect和NDatePicker组件进行时间范围选择。通过onUpdateValue事件处理函数更新参数，并在表单提交和重置时更新查询条件，从而实现动态过滤表格数据。

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

使用列表展示数据时经常会有很多的过滤项，其中时间过滤是最常见的

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

const schemas: FormSchema[] = [
    {
      field: 'term',
      component: 'NInput',
      label: '名称',
      componentProps: {
        placeholder: '请输入关键词',
      },
    },
    {
      field: 'documentStatus',
      component: 'NSelect',
      label: '状态：',
      componentProps: {
        placeholder: '请选择',
        options: [
          {
            label: '已完成',
            value: 0,
          },
          {
            label: '未完成',
            value: 1,
          },
        ],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'date',
      component: 'NDatePicker',
      label: '时间',
      giProps: { span: 2 },
      componentProps: {
        placeholder: '请选择',
        type: 'daterange',
        format: 'yyyy-MM-dd',
        valueFormat: 'yyyy-MM-dd',
        onUpdateValue: (value, formattedValue) => {
          if (formattedValue) {
            params.value.startTime = formattedValue[0];
            params.value.endTime = formattedValue[1];
          }
          console.log(value, formattedValue);
        },
      },
    },
  ];

const params = ref({});
function handleSubmit(values: Recordable) {
    console.log(values);
    params.value = Object.assign(params.value, values);
    reloadTable();
  }

function handleReset(values: Recordable) {
    console.log('reset',values);
    params.value.startTime = null;
    params.value.endTime = null;
  }