Win Design

Select 选择器

代码演示

基础用法

v-model的值为当前被选中的w-option的 value 属性值。

查看代码 < />

<template>
  <w-select v-model="value" placeholder="请选择">
  <w-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </w-option>
</w-select>
</template>
<script>
  export default {
    data () {
      return {
        options: [
          {
            value: '选项1',
            label: 'Atezolizumab注射液'
          }, {
            value: '选项2',
            label: '马来酸阿法替尼片'
          }, {
            value: '选项3',
            label: '依折麦布阿托伐他汀片'
          }, {
            value: '选项4',
            label: '阿替利珠单抗注射液'
          }, {
            value: '选项5',
            label: '依折麦布阿托伐他汀片'
          }
        ],
        value: '选项1'
      }
    }
  }
</script>

禁用选项

在w-option中，设定disabled值为 true，即可禁用该选项。

查看代码 < />

<template>
 <w-select v-model="value2" placeholder="请选择">
  <w-option
    v-for="item in options2"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :disabled="item.disabled">
  </w-option>
</w-select>
</template>
<script>
  export default {
    data () {
      return {
        options2: [
          {
            value: '选项1',
            label: 'Atezolizumab注射液'
          }, {
            value: '选项2',
            label: '马来酸阿法替尼片',
            disabled: true
          }, {
            value: '选项3',
            label: '依折麦布阿托伐他汀片'
          }, {
            value: '选项4',
            label: '阿替利珠单抗注射液'
          }, {
            value: '选项5',
            label: '依折麦布阿托伐他汀片'
          }
        ],
        value2: ''
      }
    }
  }
</script>

禁用状态

为w-select设置disabled属性，则整个选择器不可用。

查看代码 < />

<template>
 <w-select v-model="value3" disabled placeholder="请选择">
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </w-option>
  </w-select>
</template>
<script>
  export default {
    data () {
      return {
        options: [
          {
            value: '选项1',
            label: 'Atezolizumab注射液'
          }, {
            value: '选项2',
            label: '马来酸阿法替尼片'
          }, {
            value: '选项3',
            label: '依折麦布阿托伐他汀片'
          }, {
            value: '选项4',
            label: '阿替利珠单抗注射液'
          }, {
            value: '选项5',
            label: '依折麦布阿托伐他汀片'
          }
        ],
        value3: ''
      }
    }
  }
</script>

可清空

为w-select设置clearable属性，则可清空单选。

查看代码 < />

<template>
 <w-select v-model="value4" clearable placeholder="请选择">
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </w-option>
  </w-select>
</template>
<script>
  export default {
    data () {
      return {
        options: [
          {
            value: '选项1',
            label: 'Atezolizumab注射液'
          }, {
            value: '选项2',
            label: '马来酸阿法替尼片'
          }, {
            value: '选项3',
            label: '依折麦布阿托伐他汀片'
          }, {
            value: '选项4',
            label: '阿替利珠单抗注射液'
          }, {
            value: '选项5',
            label: '依折麦布阿托伐他汀片'
          }
        ],
        value4: ''
      }
    }
  }
</script>

绑定值为对象时

为w-select设置value-key属性

查看代码 < />

<template>
<div class="block">
            <w-select
              v-model="value1"
              placeholder="请选择"
              ref="select"
              value-key="id"
            >
              <w-option
                :key="item.id"
                v-for="item in options"
                :label="item.label"
                :value="item">
              </w-option>
            </w-select>
          </div>
          <div class="block">
            <w-select
              v-model="value2"
              placeholder="请选择"
              ref="select"
              value-key="id"
              multiple
            >
              <w-option
                :key="item.id"
                v-for="item in options"
                :label="item.label"
                :value="item">
              </w-option>
            </w-select>
          </div>
</template>
<script>
  export default {
    data () {
      return {
        options: [
            {
              id: '选项1',
              label: 'Atezolizumab注射液'
            }, {
              id: '选项2',
              label: '马来酸阿法替尼片'
            }, {
              id: '选项3',
              label: '依折麦布阿托伐他汀片'
            }, {
              id: '选项4',
              label: '阿替利珠单抗注射液'
            }, {
              id: '选项5',
              label: '依折麦布阿托伐他汀片'
            }
          ],
          value1: {
            id: '选项1',
            label: 'Atezolizumab注射液'
          },
          value2: [{
            id: '选项1',
            label: 'Atezolizumab注射液'
          }]
      }
    },
    watch: {
      value1:function (value) {
        console.log(value, 'test value');
      },
      value2:function (value) {
        console.log(value, 'test value');
      }
    }
  }
</script>

基础多选

为w-select设置multiple属性，适用性较广的基础多选，用 Tag 展示已选项你也可以设置collapse-tags属性将它们合并为一段文字。

查看代码 < />

<template>
<div class="block">
            <w-select
              v-model="value5"
              multiple
              collapse-tags
              placeholder="请选择">
              <w-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </w-option>
            </w-select>
          </div>
          <div class="block">
            <w-select
              v-model="value11"
              multiple
              placeholder="请选择"
            >
              <w-option
                v-for="item in options"
                :label="item.label"
                :key="item.value"
                :value="item">
              </w-option>
            </w-select>
          </div>
</template>
<script>
  export default {
    data () {
      return {
        options: [
            {
              value: '选项1',
              label: 'Atezolizumab注射液'
            }, {
              value: '选项2',
              label: '马来酸阿法替尼片'
            }, {
              value: '选项3',
              label: '依折麦布阿托伐他汀片'
            }, {
              value: '选项4',
              label: '阿替利珠单抗注射液'
            }, {
              value: '选项5',
              label: '依折麦布阿托伐他汀片'
            }
          ],
          value5: [],
          value11: []
      }
    },
    watch: {
      value5:function (value) {
        console.log(value, 'test value');
      },
      value11:function (value) {
        console.log(value, 'test value');
      }
    }
  }
</script>

折叠标签阈值

v1.6.7版本之前，开启多选与折叠标签参数时，默认超过1个以上的选择时，多余的选项都将被折叠起来，现在可以根据实际需求设置 tags-threshold 参数为折叠标签设置阈值，该值默认为1，当选则结果超出该值后的多余选项将被折叠，为布局增加一些灵活性。

查看代码 < />

<template>
  <w-select
    v-model="value"
    :tags-threshold="3"
    multiple
    collapse-tags
    placeholder="请选择"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </w-option>
  </w-select>
</template>
<script>
  export default {
    data () {
      return {
        options: [
          {
            value: "选项1",
            label: "注射液"
          },
          {
            value: "选项2",
            label: "感康"
          },
          {
            value: "选项3",
            label: "青霉素"
          },
          {
            value: "选项4",
            label: "消毒水"
          },
          {
            value: "选项5",
            label: "医用棉签"
          }
        ],
        value: []
      }
    },
    watch: {
      value: function(value) {
        console.log(value, "test value");
      }
    }
  }
</script>

自定义模板

将自定义的 HTML 模板插入w-option的 slot 中即可。

查看代码 < />

<template>
<w-select v-model="value6" placeholder="请选择">
  <w-option
    v-for="item in cities"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    <span style="float: left">{{ item.label }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
  </w-option>
</w-select>
</template>
<script>
  export default {
    data () {
      return {
        cities: [
          {
            value: '选项1',
            label: 'Atezolizumab注射液'
          }, {
            value: '选项2',
            label: '马来酸阿法替尼片'
          }, {
            value: '选项3',
            label: '依折麦布阿托伐他汀片'
          }, {
            value: '选项4',
            label: '阿替利珠单抗注射液'
          }, {
            value: '选项5',
            label: '依折麦布阿托伐他汀片'
          }
        ],
        value6: ''
      }
    }
  }
</script>

分组

使用w-option-group对备选项进行分组，它的label属性为分组名。

查看代码 < />

<template>
 <w-select v-model="value7" placeholder="请选择">
    <w-option-group
      v-for="group in options3"
      :key="group.label"
      :label="group.label">
      <w-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </w-option>
    </w-option-group>
  </w-select>
</template>
<script>
  export default {
    data () {
      return {
        options3: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        value7: ''
      }
    }
  }
</script>

可搜索

为w-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

查看代码 < />

<template>
  <w-select v-model="value8"
    filterable
    :filter-method="filterMethod"
    placeholder="请选择"
    default-first-option>
    <w-option
      v-for="item in filteredOptions"
      :key="item.pinyin"
      :label="item.label"
      :value="item.pinyin">
    </w-option>
  </w-select>
</template>
<script>
  export default {
    data () {
        return {
          options: [{
            label: '上海',
            pinyin: 'shanghai'
          }, {
            label: '北京',
            pinyin: 'beijing'
          }],
          filteredOptions: [],
          value8: ''
        }
    },
    watch: {
      value8:function (value) {
        console.log(value, 'test value');
      }
    },
    methods: {
      filterMethod(query) {
        this.filteredOptions = this.options.filter(option => {
          return option.pinyin.indexOf(query) > -1;
        })
      }
    }
  }
</script>

远程搜索

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果w-option是通过v-for指令渲染出来的，此时需要为w-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

查看代码 < />

<template>
 <w-select
    v-model="value9"
    multiple
    filterable
    remote
    reserve-keyword
    default-first-option
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
   <w-option
    v-for="(item,index) in options4"
    :key="index"
    :label="item.label"
    :value="item.value">
  </w-option>
</w-select>
</template>
<script>
  export default {
    data () {
      return {
        options4: [],
        value9: [],
        list: [],
        loading: false,
        states: ["Atezolizumab注射液", "马来酸阿法替尼片", "阿德福韦酯片",
            "依折麦布阿托伐他汀片", "阿托伐他汀钙分散片", "Acalabrutinib胶囊",
            "阿替利珠单抗注射液"]
      }
    },
  mounted() {
    this.list = this.states.map(item => {
      return { value: item, label: item };
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options4 = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options4 = [];
      }
    }
  }
  }
</script>

创建条目

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

查看代码 < />

<template>
  <w-select
    v-model="value10"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择文章标签">
    <w-option
      v-for="item in options5"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </w-option>
  </w-select>
</template>
<script>
  export default {
    data () {
      return {
        options5: [
          {
            value: '选项1',
            label: 'Atezolizumab注射液'
          }, {
            value: '选项2',
            label: '马来酸阿法替尼片'
          }, {
            value: '选项3',
            label: '依折麦布阿托伐他汀片'
          }, {
            value: '选项4',
            label: '阿替利珠单抗注射液'
          }, {
            value: '选项5',
            label: '依折麦布阿托伐他汀片'
          }
        ],
        value10: []
      }
    }
  }
</script>

API

Select Attributes

参数 说明 类型 可选值 默认值 Version
allow-create 是否允许用户创建新条目，需配合 filterable 使用 Boolean — false
automatic-dropdown 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 Boolean - false
clearable 是否可以清空选项 Boolean — false
collapse-tags 多选时是否将选中值按文字的形式展示 Boolean — false
disabled 是否禁用 Boolean — false
default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 Boolean - false
filterable 是否可搜索 Boolean — false
filter-method 自定义搜索方法 Function — —
loading 是否正在从远程获取数据 Boolean — false
loading-text 远程加载时显示的文字 String — 加载中
multiple 是否多选 Boolean — false
multiple-limit 多选时用户最多可以选择的项目数，为 0 则不限制 Number — 0
no-match-text 搜索条件无匹配时显示的文字 String — 无匹配数据
no-data-text 选项为空时显示的文字 String — 无数据
placeholder 占位符 String — 请选择
popper-class Select 下拉框的类名 String — —
popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false Boolean - true
remote 是否为远程搜索 Boolean — false
remote-method 远程搜索方法 Function — —
reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 Boolean — false
size 输入框尺寸 String medium/small/mini —
show-folded-tags 是否开启气泡展示折叠选项的功能 Boolean — true v1.7.5
tags-threshold 开启多选且折叠标签时，超过该阈值的选项将被折叠 Number — 1 v1.7.0
value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填 String — value

Select Events

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

Select Slots

name 说明 Version
— Option 组件列表
prefix Select 组件头部内容

Option Group Attributes

参数 说明 类型 可选值 默认值 Version
disabled 是否将该分组下所有选项置为禁用 Boolean — false
label 分组的组名 String — —

Option Attributes

参数 说明 类型 可选值 默认值 Version
disabled 是否禁用该选项 Boolean — false
label 选项的标签，若不设置则默认与 value 相同 String/ Number — —
value 选项的值 String/ Number/ Object — —

Methods

方法名 说明 参数 Version
blur 使 input 失去焦点，并隐藏下拉框 -
focus 使 input 获取焦点 -

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 9/8/2020, 12:26:46 PM

← Switch 开关 →