select（选择器）

基础用法

示例：

代码示例：

<template>
  <div class="bs-bg-color-white p10">
    <v-select
      v-model="value"
      :data="SELECT_LIST"
      multiple
      filterable
      placeholder="请选择水果"
      @change="handleChange"
    ></v-select>
  </div>
</template>
<script>
const SELECT_LIST = [
  {
    value: "orange",
    label: "橘子",
  },
  {
    value: "apple",
    label: "苹果",
  },
  {
    value: "banana",
    label: "香蕉",
  },
  {
    value: "watermelon",
    label: "西瓜",
  },
];

export default {
  data() {
    return {
      value: "",
      SELECT_LIST,
    };
  },
  methods: {
    /**
     * 处理改变事件
     */
    handleChange(dispatchValue, dispatchData) {
      console.log("dispatchValue", dispatchValue);
      // dispatchValue ['orange']
      console.log("dispatchData", dispatchData);
      // dispatchData [{label:"橘子",value:"orange"}]
      console.log("value", this.value);
      // value ['orange', __ob__: Observer]
    },
  },
  mounted() {},
  computed: {},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/style/variables.scss";
</style>

属性：

参数	说明	类型	可选值	默认值
data	数据	Array	-	[]
value	绑定的值	String, Number, Array	-	[]
multiple	多选状态	Boolean	-	false
clearable	在单选模式下, 是否可清空组件	Boolean	-	false
filterable	是否可以搜索	Boolean	-	false
disabled	是否禁用	Boolean	-	false
placeholder	输入框提示语	String	-	'请选择'
collapseTags	多选时是否将选中值按文字的形式展示	Boolean	-	false

事件：

事件名	说明	参数	参数说明
complete	加载完成事件	-	-
focus	获取焦点事件	event	-
blur	失去焦点事件	event	-
node-click	节点点击事件	data	-
clear	清空事件	-	-
visible-change	内容区域显示状态变化事件	value	-
input	输入事件	dispatchValue	-
change	改变事件	dispatchValue，dispatchData

插槽：

插槽名称	说明	参数
default	自定义内容项	node