v-formly-v3

Tag 标签

进行标记和分类的小标签，注： 只支持 checkable 标签模式。

代码演示

电影书旅行
电影书旅行
电影书旅行
<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta" />
    <div class="btns">
      <a-button type="primary" @click="changeEnum"> 设置 enum </a-button>
      <a-button type="primary" @click="submit"> 提交 </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw, unref } from "vue";
import type VFormly from "@/ant-design-vue/AFormly.vue";
import type { NumberMeta } from "@/core/meta/number.meta";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const formData = ref({});
const meta = {
  properties: {
    like1: {
      type: "number",
      title: "兴趣",
      enum: [
        { value: 1, label: "电影" },
        { value: 2, label: "书" },
        { value: 3, label: "旅行" },
      ],
      ui: {
        component: "tag",
        showRequired: true,
        errors: {
          required: "请至少选择一项",
        },
        checkedChange: (checked: boolean) =>
          console.log("checkedChange", checked),
        change: (value: any) => console.log("change", value),
      },
    },
    like2: {
      type: "number",
      title: "no label",
      enum: ["电影", "书", "旅行"],
      ui: {
        component: "tag",
      },
    },
    like3: {
      type: "number",
      title: "禁用状态",
      readOnly: true,
      enum: ["电影", "书", "旅行"],
      ui: {
        component: "tag",
      },
      default: ["电影", "书"],
    },
  },
  required: ["like1"],
};

function changeEnum() {
  const ctx = form.value!.getContext<NumberMeta>("/like1");
  if (ctx) {
    ctx.meta.value.enum = [
      { value: 1, label: "new 电影" },
      { value: 2, label: "new 书" },
      { value: 3, label: "new 旅行" },
    ];
  }
}
async function submit() {
  const valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}
</script>
复制

API

meta 属性

成员说明类型默认值
:enum数据源array<{value, label, disabled}> | any[]-
:readOnly禁用状态boolean-

meta.ui 属性(antdv/element)

成员说明类型默认值
@change点击标签时触发的回调function(value)-
@checkedChange设置标签的选中状态的回调function(checked)-