v-formly-v3

Select 选择器

下拉选择器。

代码演示

基础用法
有禁用选项
有禁用选项
可清空单选
基础多选(default)
基础多选(use collapse-tags)
基础多选(use collapse-tags-tooltip)
<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta" layout="horizontal">
    </v-formly-v3>
    <div class="btns">
      <el-button type="danger" @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";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const select1Options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const select2Options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
    disabled: true,
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const meta = {
  properties: {
    select1: {
      type: "string",
      title: "基础用法",
      ui: {
        component: "select",
        placeholder: "Select",
        options: select1Options,
        change: (val: any) => console.log("change", val),
      },
    },
    select2: {
      type: "string",
      title: "有禁用选项",
      ui: {
        component: "select",
        placeholder: "Select",
        options: select2Options,
      },
    },
    select3: {
      type: "string",
      title: "有禁用选项",
      readOnly: true,
      ui: {
        component: "select",
        placeholder: "Select",
        options: select1Options,
      },
    },
    select4: {
      type: "string",
      title: "可清空单选",
      ui: {
        component: "select",
        placeholder: "Select",
        options: select1Options,
        clearable: true,
      },
    },
    select5_1: {
      type: "string",
      title: "基础多选(default)",
      ui: {
        component: "select",
        placeholder: "Select",
        options: select1Options,
        multiple: true,
      },
    },
    select5_2: {
      type: "string",
      title: "基础多选(use collapse-tags)",
      ui: {
        component: "select",
        placeholder: "Select",
        options: select1Options,
        multiple: true,
        collapseTags: true,
      },
    },
    select5_3: {
      type: "string",
      title: "基础多选(use collapse-tags-tooltip)",
      ui: {
        component: "select",
        placeholder: "Select",
        options: select1Options,
        multiple: true,
        collapseTags: true,
        collapseTagsTooltip: true,
      },
    },
  },
};
let formData: any = ref({});

function clear() {
  formData.value = null;
}

async function submit() {
  let valid = await form.value!.validate();
  if (valid) {
    console.log(toRaw(unref(formData)));
  }
}
</script>

<style scoped></style>
复制

API

我们只列出属性中不一致的或新添加的，一致的地方请参考 具体组件库 文档

meta 属性

成员说明类型默认值
:readOnly禁用状态boolean-

meta.ui 属性(antdv)

成员说明类型默认值
:slotNameOfSelectDefaultselect 选择器的默认 slot，slot 名称string-
:slotNameOfNotFoundContent当下拉列表为空时显示的内容，slot 名称string-
:slotNameOfSuffixIcon自定义的选择框后缀图标，slot 名称string-
:slotNameOfRemoveIcon自定义的多选框清除图标，slot 名称string-
:slotNameOfClearIcon自定义的多选框清空图标，slot 名称string-
:slotNameOfMenuItemSelectedIcon自定义当前选中的条目图标，slot 名称string-
@change输入框内容变化时的回调function(e)-

meta.ui 属性(element)

成员说明类型默认值
:slotNameOfSelectDefaultOption 组件列表，slot 名称string-
:slotNameOfPrefixSelect 组件头部内容，slot 名称string-
:slotNameOfEmpty无选项时的列表，slot 名称string-
@change输入框内容变化时的回调function(val)-
@removeTag多选模式下移除 tag 时触发function(val)-
@visibleChange下拉框出现/隐藏时触发function(open)-