当选项过多时，使用下拉菜单展示并选择内容。

基础用法&禁用选项

适用广泛的基础单选

<template>
  <fx-select
    ref="el1"
    v-model="value"
    :el-style="selectStyle"
    :options="options"
    :before-change="beforeChange"
    @change="change"
    @focus="focus"
  ></fx-select>
  &nbsp;&nbsp;&nbsp;&nbsp;
  
  <fx-select
    ref="el2"
    :el-style="{width:'200px'}"
    v-model="value"
    width="200"
    :options="options"
    filterable
    size="medium"
    :before-change="beforeChange"
    @change="change"
    @focus="focus"
  ></fx-select>
  &nbsp;&nbsp;&nbsp;&nbsp;
  
  <fx-select
    ref="el3"
    v-model="value"
    width="200"
    :options="options"
    filterable
    size="small"
    :before-change="beforeChange"
    @change="change"
    @focus="focus"
  ></fx-select>
  <!-- <fx-button @click="getValue">getValue()</fx-button> -->
  <!-- <fx-button @click="setValue">setValue()</fx-button> -->
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        selectStyle:{width:'300px'},
        options: [{
          value: 'Beijing',
          label: '北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京',
        },
        {
          value: 'Shanghai',
          label: '上海',
          disabled: true,
        },
        {
          value: 'Nanjing',
          label: '南京',
        },
        {
          value: 'Chengdu',
          label: '成都',
        },
        {
          value: 'Shenzhen',
          label: '深圳',
        },
        {
          value: 'Guangzhou',
          label: '广州',
        }]
      }
    },
    methods:{
      beforeChange(val,oldVal){
        console.log('beforeChange...',val,oldVal)
        // if (val==='Shanghai') {
        //   return false;
        // }
      },
      getValue(){
        let v=this.$refs.el1.getValue();
        console.log(v,this.value);
      },
      setValue(){
        this.$refs.el1.setValue('Chengdu')
      },
      change(val) {
        console.log('change:', val,this.value);
      },
      focus(event) {
        console.log('focus:', event);
      },
    },
    created(){
    }
  };
</script>

禁用状态

选择器不可用状态

<template>
  <fx-select v-model="value" :options="options" disabled></fx-select>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        disabled: true,
        options: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          }
        ]
      };
    },
  };
</script>

可清空单选

包含清空按钮，可将选择器清空为初始状态

<template>
  <fx-select placeholder="请选择" v-model="value" :options="options" clearable filterable></fx-select>
</template>

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        options: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '广州',
          },
        ]
      };
    },
  };
</script>

基础多选

适用性较广的基础多选，用 Tag 展示已选项

<template>
  <div style="overflow:hidden;">
    <fx-select
      placeholder="请选择"
      v-model="value"
      :options="options"
      multiple
      filterable
      clearable
      v-show="show"
      :disabled="disabled"
    >
    <!-- <span slot="tag" slot-scope="props">{{ props.data.currentLabel }},222</span> -->
    </fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="medium"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="small"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value2"
      :options="options"
      multiple
      filterable
      collapse-tags
      @change="onChange"
    >
    </fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value2"
      :options="options"
      size="medium"
      multiple
      filterable
      collapse-tags
    >
    </fx-select>
    <fx-select
      placeholder="请选择"
      v-model="value2"
      :options="options"
      size="small"
      multiple
      filterable
      collapse-tags
    >
    </fx-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // value: ['Shanghai','Shanghai2','Chengdu','Shenzhen'],
        value: [],
        disabled:false,
        show:true,
        options: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '广州',
          },
        ],
        value2: 'Shanghai',
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val);
      },
    }
  };
</script>

自定义模板

可以自定义备选项

<template>
  <fx-select placeholder="请选择" v-model="value" :options="options" @change="onChange" option-value-key="value2">
    <template slot="options" slot-scope="slotProps">
      <span style="float: left">{{ slotProps.data.label2 }}</span>
      <span style="float: right; color: #8492a6;">{{ slotProps.data.value2 }}</span>
    </template>
  </fx-select>

</template>

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        options: [
          {
            value2: 'Beijing',
            label2: '北京',
          },
          {
            value2: 'Shanghai',
            label2: '上海',
          },
          {
            value2: 'Nanjing',
            label2: '南京',
          },
          {
            value2: 'Chengdu',
            label2: '成都',
          }
        ],
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val,this.value);
      },
    }
  };
</script>

分组

备选项进行分组展示

<template>
  <fx-select placeholder="请选择" v-model="value" is-option-group :options="options"></fx-select>
</template>

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        isOptionGroup: true,
        options: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
            label: '城市名',
            options: [{
              value: 'Chengdu',
              label: '成都'
            }, {
              value: 'Shenzhen',
              label: '深圳',
              disabled: true
            }, {
              value: 'Guangzhou',
              label: '广州'
            }, {
              value: 'Dalian',
              label: '大连'
            }]
          }]
      };
    },
  };
</script>

创建条目

可以创建并选中选项中不存在的条目

<template>
  <fx-select
    v-model="value"
    :options="options"
    filterable
    allow-create
    default-first-option
    placeholder="请选择文章标签"
    @change="onChange">
  </fx-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }
    },
    methods:{
      onChange(val) {
        console.log('change:', val);
      },
    }
  }
</script>

Select Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string/array	—	-
options	选项列表，选项属性参见“Option Attributes”	array	—	[]
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
option-value-key	作为options中 value 唯一标识的键名	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用	boolean	—	false
no-match-text	搜索条件无匹配时显示的文字	string	—	无匹配数据
no-data-text	选项为空时显示的文字	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	boolean	-	false
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	-	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	-	false
is-option-group	是否是分组选项	boolean	-	false
validate-when-options-change	更新options时是否触发验证	boolean	-	-

Select Events

事件名称	说明	回调参数
change	选中值发生变化时触发，function(val)	当前的选中值
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮时触发	—
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 获得焦点时触发	(event: Event)

Option Attributes

参数	说明	类型	可选值	默认值
value	选项的值，如果该项为“其他”项，约定其值为"other"	string/number	—	—
label	选项的标签，若不设置则默认与 value 相同	string/number	—	—
disabled	是否禁用该选项	boolean	—	false
isOther	标识该项是否为“其他”项。注：is-option-group为true时不支持“其他”选项	boolean	-	-
isRequired	标识选中“其他”项，输入框是否为必填	boolean	-	-

Methods

方法名	说明	参数
focus	使 input 获取焦点	-
blur	使 input 失去焦点，并隐藏下拉框	-
before-change	选择值生效前的钩子函数，如果返回false，则选择不生效	-
resetInputHeight	计算组件高度	-