select | wl-element

# 基础用法

提示

基于el-select做了一些增强:

clearable, filterable, defaultFirstOption这三个属性修改为默认为true
options属性支持传入数组和对象,传入数组时,可同步传入optionsAttr属性,该属性为一个字符串用逗号分隔,为label,key的别名,传入对象时则传入简单key-value结构

options

传入el-select标准的options,label-value结构

options配置别名

传入对象结构

<template>
  <div>
    <h4>options</h4>
    <p>传入el-select标准的options,label-value结构</p>
    <wl-select label="商品名" :options="options1" v-model="value1"></wl-select>
    <p>options配置别名</p>
    <wl-select label="职位" :options="options2" options-attr="jobName,jobCode"
               v-model="value2"></wl-select>
    <p>传入对象结构</p>
    <wl-select label="礼品类型" :options="options3" v-model="value3"></wl-select>
  </div>
</template>

<script>
export default {
  name: 'select-demo-01',
  data () {
    return {
      value1: '',
      value2: '',
      value3: ''
    }
  },
  computed: {
    options1 () {
      return [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ]
    },
    options2 () {
      return [
        { jobName: '设计', jobCode: 'designer' },
        { jobName: '程序员', jobCode: 'programmer' },
        { jobName: '测试', jobCode: 'testers' },
        { jobName: '产品', jobCode: 'product' }
      ]
    },
    options3 () {
      return {
        'cash': '现金',
        'prepaid_card': '预付卡',
        'entity': '实物',
        'maintenance': '保养',
        'cosmetology': '美容',
        'car_wash': '洗车'
      }
    }
  }
}
</script>

# 多选

选定值为

<template>
  <div>
    <wl-select
        v-model="value" :options="options"
        :attrs="{ 'collapse-tags':true,multiple:true}"
        placeholder="请选择"></wl-select>
    <p>选定值为{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: 'select-demo-03',
  data() {
    return {
      value: ''
    }
  },
  computed: {
    options() {
      return [
        {value: '选项1', label: '黄金糕'},
        {value: '选项2', label: '双皮奶'},
        {value: '选项3', label: '蚵仔煎'},
        {value: '选项4', label: '龙须面'},
        {value: '选项5', label: '北京烤鸭'}
      ]
    }
  }
}
</script>

# 绑定对象

选定值为[]

<template>
  <div>
    <wl-select v-model="user" multiple :options="options" value-key="id"
               value-label="name"
               placeholder="请选择"></wl-select>
    <p>选定值为{{user}}</p>
  </div>
</template>

<script>
export default {
  name: 'select-demo-04',
  data () {
    return {
      user: []
    }
  },
  computed: {
    options () {
      return [
        { 'id': '1fD0c9d7-1CDd-c3cf-D0CA-BfEbfC33f1e5', 'name': '顾平', 'address': '广东省 东莞市 -' },
        { 'id': '3F96bddc-0C7F-BEd5-4Aac-f9b7c2e972eC', 'name': '郝娟', 'address': '河北省 沧州市 吴桥县' },
        { 'id': 'fdD4B75c-39e6-Bde8-A894-cea98838B5cc', 'name': '胡磊', 'address': '广西壮族自治区 南宁市 兴宁区' },
        { 'id': 'Cf7Beafa-CED7-dC47-EDB8-4fa638EF0a5B', 'name': '孟桂英', 'address': '湖北省 荆州市 洪湖市' }
      ]
    }
  }
}
</script>

# 属性

属性	说明	类型	默认值
label	标题,设置后会自动设置placehoder 请选择${label}	string	-
optionsAttr	选项的别名,由一个字符串用逗号分隔,代表label和value的别名	string	'label,value'
events	其他事件对象,有时候不方便在模板上用@change=xxx这种写法可用此参数	事件对象如:{click:this.handClick}	-

← input radio →