Select 选择器

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

基础示例：

• Html
• Css3
• Javascript
• Vue
• React

<lee-select v-model="value" placeholder="请选择">
    <lee-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    </lee-option>
</lee-select>

<script>
    export default {
        data() {
              return {
                options: [{
                  value: '选项1',
                  label: 'Html'
                }, {
                  value: '选项2',
                  label: 'Css3'
                }, {
                  value: '选项3',
                  label: 'Javascript'
                }, {
                  value: '选项4',
                  label: 'Vue'
                }, {
                  value: '选项5',
                  label: 'React'
                }],
                value: ''
              }
          }
    }
</script>

显示代码

可搜索：

• Html
• Css3
• Javascript
• Vue
• React

<lee-select v-model="value" :lists="options" filterable placeholder="请选择">
    <lee-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    </lee-option>
</lee-select>

<script>
    export default {
        data() {
              return {
                options: [{
                  value: '选项1',
                  label: 'Html'
                }, {
                  value: '选项2',
                  label: 'Css3'
                }, {
                  value: '选项3',
                  label: 'Javascript'
                }, {
                  value: '选项4',
                  label: 'Vue'
                }, {
                  value: '选项5',
                  label: 'React'
                }],
                value: ''
              }
          }
    }
</script>

显示代码

自定义模板：

• 北京 Beijin
• 上海 ShangHai
• 广州 GuangZhou
• 深圳 ShengZhen
• 厦门 XiaMen

<lee-select v-model="value" placeholder="请选择">
    <lee-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
     <span>{{ item.label }}</span>
     <span>{{ item.value }}</span>
    </lee-option>
</lee-select>

<script>
    export default {
        data() {
              return {
                options: [{
                  value: 'Beijin',
                  label: '北京'
                }, {
                  value: 'ShangHai',
                  label: '上海'
                }, {
                  value: 'GuangZhou',
                  label: '广州'
                }, {
                  value: 'ShengZhen',
                  label: '深圳'
                }, {
                  value: 'XiaMen',
                  label: '厦门'
                }],
                value: ''
              }
          }
    }
</script>

显示代码

Slect 属性

参数	说明	类型	可选值	默认值
v-model	绑定初始选值	String	--	--
filterable	是否可搜索	Boolean	true,false	false

Option 属性

参数	说明	类型	可选值	默认值
label	选项的标签	String	--	--
value	选项的值	String	--	--