Select 选择器

agel-select 组件是基于 el-select 组件的二次封装组件。

使用

options 属性支持多种数据类型，String，Array[String]，Array[Object]，Promise，Function，若是 Function 类型，可以通过 getOptions 进行主动刷新。

value 属性多选时可为数组 [xx1,xx2] 或者字符串 xx1,xx2，逗号间隔，默认为字符串。

filter 属性可以开启关键字过滤，数据量大的情况建议使用 el-select 的 filterable 属性。

点击查看代码

<template>
  <div class="demo border">
    <span>组件：</span>
    <agel-select v-model="value" :options="options" filter multiple>
      <template v-slot:option="{option}">
        <el-tag>{{option.label}}</el-tag>
      </template>
    </agel-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: "1,2",
      options: [
        { label: "男", value: "1" },
        { label: "女", value: "2" },
      ],
    };
  },
};
</script>

演示

点击查看代码

<template>
  <agel-form class="demo border" v-model="form"></agel-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        span: 12,
        data: {
          demo0: "北京,重庆",
        },
        items: [
          {
            prop: "demo0",
            label: "字符串",
            component: "el-select",
            options: "北京,上海,重庆",
            multiple: true,
          },
          {
            prop: "demo1",
            label: "字符串数组",
            component: "el-select",
            options: ["北京", "上海"],
            multiple: true,
          },
          {
            prop: "demo2",
            label: "对象数组",
            component: "el-select",
            options: [
              { label: "北京", value: "Beijing", disabled: true },
              { label: "上海", value: "Shanghai" },
            ],
          },
          {
            prop: "demo3",
            label: "Promise对象",
            component: "el-select",
            options: this.$http.get("/api/getRandomData"),
          },
          {
            prop: "demo4",
            label: "Function函数",
            component: "el-select",
            clearable: true,
            options: async () => {
              let data = await this.$http.get("/api/getRandomData");
              return data;
            },
          },
          {
            prop: "button",
            component: "el-button",
            type: "primary",
            slots: "点击刷新 options",
            labelWidth: "0px",
            span: 12,
            on: {
              click: () => {
                const vm = this.form.getRef("demo4");
                vm.getOptions();
                vm.focus();
              },
            },
          },
          {
            prop: "demo5",
            label: "分组过滤",
            component: "el-select",
            filterable: true,
            clearable: true,
            props: { label: "name", value: "id" },
            options: [
              {
                name: "热门城市",
                options: [
                  { id: "Shanghai", name: "上海" },
                  { id: "Beijing", name: "北京", disabled: true },
                ],
              },
              {
                name: "城市名",
                options: [
                  { id: "Chengdu", name: "成都" },
                  { id: "Shenzhen", name: "深圳" },
                  { id: "Guangzhou", name: "广州" },
                  { id: "Dalian", name: "大连" },
                ],
              },
            ],
            on: {
              change: (v) => {
               console.log( this.form.getRef("demo5").getValueOption(v))
              },
            },
          },
          {
            prop: "demo6",
            label: "插槽样式",
            component: "el-select",
            options: [
              { value: "Shanghai", label: "上海" },
              { value: "Beijing", label: "北京" },
            ],
            slots: {
              option: ({ option, index }) => {
                return (
                  <div>
                    <span style="float: left">{option.label}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">
                      {option.value}
                    </span>
                  </div>
                );
              },
              prefix: () => {
                let style = "color:#409EFF;line-height:28px;font-size:20px";
                return <i class="el-icon-platform-eleme" style={style} />;
              },
            },
          },
          {
            prop: "demo7",
            label: "远程搜索",
            component: "el-select",
            remote: true,
            filterable: true,
            multiple: true,
            reserveKeyword: true,
            loading: false,
            placeholder: "请输入1进行远程搜索",
            options: [],
            remoteMethod: (query) => {
              let vm = this.form.getItem("demo7");
              if (query !== "") {
                vm.loading = true;
                setTimeout(() => {
                  vm.options = query == "1" ? ["1k", "1w"] : [];
                  vm.loading = false;
                }, 200);
              } else {
                vm.options = [];
              }
            },
          },
          {
            prop: "demo8",
            label: "创建条目",
            component: "el-select",
            multiple: true,
            filterable: true,
            allowCreate: true,
            defaultFirstOption: true,
            options: ["HTML", "CSS", "JavaScript"],
          },
        ],
      },
    };
  },
};
</script>

Select Attributes

属性	类型	默认值	说明
value	String/Array	-	绑定值
filter	Boolean	false	是否开启过滤查询
options	String/Array/Function/Promise	-	option 配置项
props	Object	{label,value}	数据配置选项
......	......	.........	el-select 属性 (opens new window)

Select Option

属性	类型	默认值	说明
label	String	-	label 名称
value	String/Number	-	value 值
style	String/Object	-	内联样式
class	String/Object/Array	-	class名称
......	......	.........	el-select option 属性 (opens new window)

Select Slots

属性	说明
default	默认插槽
prefix	Select 组件头部内容
empty	无选项时的列表
option	每一个选择项插槽，参数 {option,index,group}

Select Methods

属性	参数	说明
focus	-	聚焦
blur	-	失焦
getOptions	-	刷新数据， options 为 Function 时可调用
getValueOption	value	返回 value 所对应的 option 对象，多选时为数组

Select Events

属性	参数	说明
......	......	el-select 事件 (opens new window)