Common Components
On this page

NEasyForm ​

使用 NEasyForm ​

点击查看代码
javascript
import { ref, watch } from "vue";
import { FormItemControlType } from "@nbicc/common-components";

const show = ref(false);
const data = ref({});
const fields = ref([
  { name: "input", label: "输入框输入框输入框输入框", type: FormItemControlType.INPUT },
  { name: "input-number", label: "数字输入框", type: FormItemControlType.INPUT_NUMBER },
  [
    { name: "select", label: "下拉框", type: FormItemControlType.SELECT },
    {
      options: [
        { label: "option1", value: "option1" },
        { label: "option2", value: "option2" },
        { label: "option3", value: "option3" }
      ]
    }
  ],
  { name: "date-picker", label: "日期选择器", type: FormItemControlType.DATE_PICKER },
  { name: "time-picker", label: "时间选择器", type: FormItemControlType.TIME_PICKER },
  { name: "switch", label: "开关", type: FormItemControlType.SWITCH },
  [
    { name: "radio", label: "单选框", type: FormItemControlType.RADIO_GROUP },
    {
      options: [
        { label: "option1", value: "option1" },
        { label: "option2", value: "option2" },
        { label: "option3", value: "option3" }
      ]
    }
  ],
  [
    { name: "checkbox", label: "多选框", type: FormItemControlType.CHECKBOX_GROUP },
    {
      options: [
        { label: "option1", value: "option1" },
        { label: "option2", value: "option2" },
        { label: "option3", value: "option3" }
      ]
    }
  ],
  { name: "textarea", label: "文本域", type: FormItemControlType.TEXT_AREA },
  { name: "slider", label: "滑块", type: FormItemControlType.SLIDER },
  { name: "tree-select", label: "树选择器", type: FormItemControlType.TREE_SELECT },
  { name: "cascader", label: "级联选择器", type: FormItemControlType.CASCADER }
]);
watch(data, () => console.log(data.value));

function handleSearch() {
  console.log("search");
}

function handleReset() {
  console.log("reset");
}

function handleChange(data) {
  console.log(data);
}

const nEasyFormRef = ref();

function handleFormItemInputValue() {
  nEasyFormRef.value.setField("input", "不是输入框不是输入框不是输入框");
}
html
<template>
  <a-space>
    <NButton type="primary" @click="nEasyFormRef.search()">通过 API 触发查询</NButton>
    <NButton type="primary" secondary @click="nEasyFormRef.reset()">通过 API 触发重置</NButton>
    <NButton @click="handleFormItemInputValue">手动设置输入框的值</NButton>
    <a-switch v-model:checked="show">show</a-switch>
  </a-space>
  <NEasyForm
    v-show="show"
    ref="nEasyFormRef"
    v-model:data="data"
    :fields="fields"
    @search="handleSearch"
    @reset="handleReset"
    @change="handleChange"
  />
</template>

响应式 ​

响应式示例