Select 选择器

下拉选择器。

代码演示

姓名

凯文

禁用

中级

加载中

香蕉

labelInValue

橘子

省

浙江

市

隐藏已选项

 

Inserted are removed

定制回填内容

 

select one country

选项分组

lucy

<template>
  <div>
    <v-formly-v3 ref="form" v-model="formData" :meta="meta" layout="horizontal">
      <template v-slot:select6>
        <a-spin size="small" />
      </template>
      <template v-slot:select8SelectOption>
        <a-select-option
          :value="item.value"
          :label="item.label"
          v-for="(item, index) in select8Options"
          :key="index"
        >
          <span role="img"> {{ item.icon }} </span>
          {{ item.text }}
        </a-select-option>
      </template>
      <template v-slot:select9SelectGroupOption>
        <a-select-opt-group>
          <template #label>
            <span><user-outlined />Manager</span>
          </template>
          <a-select-option value="jack"> Jack </a-select-option>
          <a-select-option value="lucy"> Lucy </a-select-option>
        </a-select-opt-group>
        <a-select-opt-group label="Engineer">
          <a-select-option value="Kevin"> kevin </a-select-option>
        </a-select-opt-group>
      </template>
    </v-formly-v3>
    <div class="btns">
      <a-button type="danger" @click="clear"> 重置 </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 { StringMeta } from "@/core/meta/string.meta";

const form = ref<null | InstanceType<typeof VFormly>>(null);
const provinceData = [
  { value: "Zhejiang", label: "浙江" },
  { value: "Jiangsu", label: "江苏" },
];
const cityData: any = {
  Zhejiang: [
    { value: "Hangzhou", label: "杭州" },
    { value: "Ningbo", label: "宁波" },
    { value: "Wenzhou", label: "温州" },
  ],
  Jiangsu: [
    { value: "Nanjing", label: "南京" },
    { value: "Suzhou", label: "苏州" },
    { value: "Zhenjiang", label: "镇江" },
  ],
};

const select7Options = ["Apples", "Nails", "Bananas", "Helicopters"];
const select8Options = [
  { label: "China", value: "china", icon: "🇨🇳", text: "China (中国)" },
  { label: "USA", value: "usa", icon: "🇺🇸", text: "USA (美国)" },
  { label: "Japan", value: "japan", icon: "🇯🇵", text: "Japan (日本)" },
  { label: "Korea", value: "korea", icon: "🇰🇷", text: "Korea (韩国)" },
];

let select7FilteredOptions: any = ref(
  select7Options.map((item) => ({ value: item }))
);

let select4_1Options = ref(provinceData);
let select4_2Options = ref(cityData["Zhejiang"]);

const meta = {
  properties: {
    select: {
      type: "string",
      title: "姓名",
      ui: {
        component: "select",
        labelInValue: false,
        loading: true,
        options: [
          { value: "Jack", label: "杰克", title: "title Jack" },
          { value: "Lucy", label: "露西", disabled: true },
          { value: "Kevin", label: "凯文" },
        ],
        change: (val: any, option: any) => console.log("change", val, option),
        select: (val: any, option: any) => console.log("select", val, option),
      },
      default: "Kevin",
    },
    select1: {
      type: "string",
      title: "禁用",
      readOnly: true,
      ui: {
        component: "select",
        options: [
          { value: "L", label: "初级" },
          { value: "M", label: "中级" },
          { value: "H", label: "高级" },
        ],
      },
      default: "中级",
    },
    select2: {
      type: "string",
      title: "加载中",
      ui: {
        component: "select",
        loading: true,
        options: [
          { value: "Apple", label: "苹果" },
          { value: "Orange", label: "橘子" },
          { value: "Banana", label: "香蕉" },
        ],
      },
      default: "香蕉",
    },
    select3: {
      type: "string",
      title: "labelInValue",
      ui: {
        component: "select",
        labelInValue: true,
        options: [
          { value: "Apple", label: "苹果" },
          { value: "Orange", label: "橘子" },
          { value: "Banana", label: "香蕉" },
        ],
        change: (val: any, option: any) => console.log("change", val, option),
      },
      default: { key: "Orange", label: "橘子" },
    },
    select4_1: {
      type: "string",
      title: "省",
      default: "浙江",
      ui: {
        component: "select",
        options: select4_1Options,
        grid: {
          span: 12,
        },
        change: (val: any) => {
          // 1. 通过获取context赋值
          const context = form.value!.getContext<StringMeta>("/select4_2");
          context.value = null;
          unref(context.ui).options = cityData[val];
          // 2. 或者通过下面的方式直接赋值
          //   select4_2Options.value = cityData[val];
        },
      },
    },
    select4_2: {
      type: "string",
      title: "市",
      ui: {
        component: "select",
        options: select4_2Options,
        grid: {
          span: 12,
        },
      },
    },
    select7: {
      type: "string",
      title: "隐藏已选项",
      ui: {
        component: "select",
        mode: "multiple",
        placeholder: "Inserted are removed",
        options: select7FilteredOptions,
        change: (val: any) => {
          select7FilteredOptions.value = select7Options
            .filter((o: any) => !val.includes(o))
            .map((item) => ({ value: item }));
        },
      },
    },
    select8: {
      type: "string",
      title: "定制回填内容",
      ui: {
        component: "select",
        mode: "multiple",
        placeholder: "select one country",
        optionLabelProp: "label",
        slotNameOfSelectDefault: "select8SelectOption",
      },
    },
    select9: {
      type: "string",
      title: "选项分组",
      ui: {
        component: "select",
        slotNameOfSelectDefault: "select9SelectGroupOption",
      },
      default: "lucy",
    },
  },
};
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)

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

meta.ui 属性(element)

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