v-formly-v3

Array 数组

创建对象数组。

代码演示

姓名
产品清单
名称
简介
产品清单
<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta" />
    <div class="btns">
      <el-button type="primary" @click="setName0"> 设置 name </el-button>
      <el-button type="primary" @click="add"> 添加 1 个</el-button>
      <el-button type="primary" @click="set(5)"> 添加 5 个</el-button>
      <el-button type="primary" @click="clear"> 重置 </el-button>
      <el-button type="primary" @click="submit"> 提交 </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, toRaw, unref } from "vue";
import type VFormly from "@/element-plus/ElFormly.vue";
import type { ArrayMeta } from "@/core/meta/array.meta";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const formData = ref({
  product: [
    {
      name: "3",
    },
  ],
});
const meta = {
  type: "object",
  properties: {
    name: {
      title: "姓名",
      type: "string",
      ui: {
        showRequired: true,
      },
    },
    product: {
      type: "array",
      title: "产品清单",
      // description: "至少添加一个，至多添加三个",
      minItems: 1,
      maxItems: 3,
      items: {
        type: "object",
        properties: {
          name: {
            type: "string",
            title: "名称",
            ui: {
              showRequired: true,
            },
            default: "1",
          },
          desc: { type: "string", title: "简介" },
          product: {
            type: "array",
            title: "产品清单",
            items: {
              type: "object",
              properties: {
                name: { type: "string", title: "名称", default: "1-1" },
                desc: { type: "string", title: "简介" },
              },
            },
            ui: {
              grid: { arraySpan: 24 },
            },
          },
        },
        required: ["name"],
      },
      ui: {
        showRequired: true,
        grid: { arraySpan: 24 },
        addTitle: "添加",
        // optional: "(选填)",
        // optionalHelp: {
        //   icon: "QuestionCircleOutlined",
        //   text: "选填帮助",
        // },
      },
      default: [
        {
          name: "2",
        },
      ],
    },
  },
  required: ["name"],
};
async function submit() {
  const valid = await form.value!.validate();
  console.log(valid, toRaw(unref(formData)));
}
function setName0() {
  const context = form.value!.getContext<ArrayMeta>("/product/0/name");
  if (context) {
    context.value = "kevin zhang";
  }
}
function clear() {
  const ctx = form.value!.getContext<ArrayMeta>("/product");
  console.log(ctx.value);
  ctx.value = [];
}
function set(num: number) {
  const ctx = form.value!.getContext<ArrayMeta>("/product");
  console.log(ctx.value);
  const arr = [];
  for (let i = 0; i < num; i++) {
    arr.push({
      name: `${i}`,
      desc: `${i}`,
      product: [
        { name: `${i}-1`, desc: `${i}-1` },
        { name: `${i}-2`, desc: `${i}-2` },
        { name: `${i}-3`, desc: `${i}-3` },
        { name: `${i}-4`, desc: `${i}-4` },
      ],
    });
  }
  ctx.value = arr;
}
function add() {
  const ctx = form.value!.getContext<ArrayMeta>("/product");
  ctx.add();
}
</script>
复制

API

meta 属性

成员说明类型默认值
:items数组元素类型描述object[]
:minItems约束数组最小的元素个数number-
:maxItems约束数组最大的元素个数number-
:readOnly禁用状态boolean-

meta.ui 属性(antdv)

成员说明类型默认值
:addTitle添加按钮文本string添加
:addType添加按钮类型，等同 button typestringdashed
:removable是否包含移除按钮booleantrue
:showRequired当前项是否为必填，仅影响样式boolean-
@add添加回调，返回值为实例 idfunction(id)-
@remove移除回调，返回值为实例 indexfunction(index)-

meta.ui 属性(element)

成员说明类型默认值
:addTitle添加按钮文本string添加
:addType添加按钮类型，等同 button typestringprimary
:removable是否包含移除按钮booleantrue
:showRequired当前项是否为必填，仅影响样式boolean-
@add添加回调，返回值为实例 idfunction(id)-
@remove移除回调，返回值为实例 indexfunction(index)-

布局

数组的布局分为数组本身以及数组元素布局，arraySpan 决定每个数组元素占栅格数值。

产品清单
<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta" />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import type VFormly from "@/element-plus/ElFormly.vue";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const formData = ref({});
const meta = {
  type: "object",
  properties: {
    product: {
      type: "array",
      title: "产品清单",
      items: {
        type: "object",
        properties: {
          name: {
            type: "string",
            title: "名称",
          },
          desc: { type: "string", title: "简介" },
        },
      },
      ui: { grid: { arraySpan: 18 } },
    },
  },
};
</script>
复制