When there are too many options, use a Dropdown Menu to display and select content.

Basic Usage and Disabled Options

A broadly applicable basic single selection.

<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: 'BeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijingBeijing',
        },
        {
          value: 'Shanghai',
          label: 'Shanghai',
          disabled: true,
        },
        {
          value: 'Nanjing',
          label: 'Nanjing',
        },
        {
          value: 'Chengdu',
          label: 'Chengdu',
        },
        {
          value: 'Shenzhen',
          label: 'Shenzhen',
        },
        {
          value: 'Guangzhou',
          label: 'Guangzhou',
        }]
      }
    },
    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>

Disabled State

Disabled state of Select.

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

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

Clearable Single Selection

Includes a clear button that can reset Select to its initial state.

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

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        options: [
          {
            value: 'Beijing',
            label: 'Beijing',
          },
          {
            value: 'Shanghai',
            label: 'Shanghai',
          },
          {
            value: 'Nanjing',
            label: 'Nanjing',
          },
          {
            value: 'Chengdu',
            label: 'Chengdu',
          },
          {
            value: 'Shenzhen',
            label: 'Shenzhen',
          },
          {
            value: 'Guangzhou',
            label: 'Guangzhou',
          },
        ]
      };
    },
  };
</script>

Basic Multiple Selection

A broadly applicable basic multiple selection. Selected items are displayed with tags.

<template>
  <div style="overflow:hidden;">
    <fx-select
      placeholder="Please select"
      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="Please select"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="medium"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value"
      :options="options"
      multiple
      filterable
      size="small"
      v-show="show"
      :disabled="disabled"
    ></fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value2"
      :options="options"
      multiple
      filterable
      collapse-tags
      @change="onChange"
    >
    </fx-select>
    <fx-select
      placeholder="Please select"
      v-model="value2"
      :options="options"
      size="medium"
      multiple
      filterable
      collapse-tags
    >
    </fx-select>
    <fx-select
      placeholder="Please select"
      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: 'Beijing',
          },
          {
            value: 'Shanghai',
            label: 'Shanghai',
          },
          {
            value: 'Nanjing',
            label: 'Nanjing',
          },
          {
            value: 'Chengdu',
            label: 'Chengdu',
          },
          {
            value: 'Shenzhen',
            label: 'Shenzhen',
          },
          {
            value: 'Guangzhou',
            label: 'Guangzhou',
          },
        ],
        value2: 'Shanghai',
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val);
      },
    }
  };
</script>

Custom Template

Options can be customized.

<template>
  <fx-select placeholder="Please select" 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: 'Beijing',
          },
          {
            value2: 'Shanghai',
            label2: 'Shanghai',
          },
          {
            value2: 'Nanjing',
            label2: 'Nanjing',
          },
          {
            value2: 'Chengdu',
            label2: 'Chengdu',
          }
        ],
      };
    },
    methods:{
      onChange(val) {
        console.log('change:', val,this.value);
      },
    }
  };
</script>

Grouping

Displays options in groups.

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

<script>
  export default {
    data() {
      return {
        value: 'Shanghai',
        isOptionGroup: true,
        options: [{
          label: 'Popular Cities',
          options: [{
            value: 'Shanghai',
            label: 'Shanghai'
          }, {
            value: 'Beijing',
            label: 'Beijing'
          }]
        }, {
            label: 'City Name',
            options: [{
              value: 'Chengdu',
              label: 'Chengdu'
            }, {
              value: 'Shenzhen',
              label: 'Shenzhen',
              disabled: true
            }, {
              value: 'Guangzhou',
              label: 'Guangzhou'
            }, {
              value: 'Dalian',
              label: 'Dalian'
            }]
          }]
      };
    },
  };
</script>

Create Options

You can create and select entries that do not exist in the options.

<template>
  <fx-select
    v-model="value"
    :options="options"
    filterable
    allow-create
    default-first-option
    placeholder="Please select article label"
    @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

Parameter	Description	Type	Optional Values	Default
value / v-model	Bound value	string/array	-	-
options	Option list. For option properties, see "Option Attributes"	array	-	[]
multiple	Whether multiple selection is enabled	boolean	-	false
disabled	Whether disabled	boolean	-	false
value-key	Key name used as the unique identifier for value; required when the bound value is an object type	string	-	value
option-value-key	Key name used as the unique identifier for value in options	string	-	value
size	Input size	string	medium/small/mini	-
clearable	Whether options can be cleared	boolean	-	false
collapse-tags	Whether to display selected values as text in multiple selection mode	boolean	-	false
multiple-limit	Maximum number of items a user can select in multiple selection mode. 0 means unlimited	number	-	0
name	name property of the select input	string	-	-
autocomplete	autocomplete property of the select input	string	-	off
placeholder	Placeholder	string	-	Please select
filterable	Whether searchable	boolean	-	false
allow-create	Whether users are allowed to create new entries; use with filterable	boolean	-	false
no-match-text	Text displayed when no search condition matches	string	-	No matching data
no-data-text	Text displayed when options are empty	string	-	No data
popper-class	Select Dropdown class name	string	-	-
reserve-keyword	When multiple and searchable, whether to retain the current search keyword after selecting an option	boolean	-	false
default-first-option	Press Enter in the input to select the first matching item. Use with filterable or remote	boolean	-	false
popper-append-to-body	Whether to append Popover to the body element. If Popover positioning has issues, set this property to false	boolean	-	true
automatic-dropdown	For non-searchable Select, whether to automatically show the option menu after the input gains focus	boolean	-	false
is-option-group	Whether it is a grouped option	boolean	-	false
validate-when-options-change	Whether to trigger validation when updating options	boolean	-	-

Select Events

Event Name	Description	Callback Parameters
change	Triggered when the selected value changes, function(val)	Current selected value
visible-change	Triggered when the dropdown appears or hides	true when it appears, false when it hides
remove-tag	Triggered when a tag is removed in multiple selection mode	Removed tag value
clear	Triggered when the user clicks the clear button in clearable single selection mode	-
blur	Triggered when the input loses focus	(event: Event)
focus	Triggered when the input gains focus	(event: Event)

Option Attributes

Parameter	Description	Type	Optional Values	Default
value	Option value. If this item is an "Other" item, its value is conventionally "other"	string/number	-	-
label	Option label. If not set, it defaults to the same as value	string/number	-	-
disabled	Whether this option is disabled	boolean	-	false
isOther	Indicates whether this item is an "Other" item. Note: "Other" options are not supported when is-option-group is true	boolean	-	-
isRequired	Indicates whether the input is required when the "Other" item is selected	boolean	-	-

Methods

Method	Description	Parameter
focus	Focuses the input	-
blur	Blurs the input and hides the dropdown	-
before-change	Hook function before the selected value takes effect. If false is returned, the selection does not take effect	-
resetInputHeight	Calculates component height	-