VUE-Element组件-select选择器的使用

淩亂°似流年 2022-04-15 01:38 516阅读 0赞

下拉菜单是我们在项目中经常用到的一个组件，在这里提供一个VUE桌面组件库[`Element`][Element]

**Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库**

### 基础单选 ###

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default { 
        data() { 
          return { 
            options: [{ 
              value: '选项1',
              label: '中国'
            }, { 
              value: '选项2',
              label: '韩国'
            }, { 
              value: '选项3',
              label: '日本'
            }, { 
              value: '选项4',
              label: '英国'
            }],
            value: ''
          }
        }
      }
    </script>

`v-model绑定的值为当前被选中的el-option的 value 属性值，lable是下拉项展示的值，以上代码默认项就是空，因为value为空。`  
如果是这样：

...
    	...
         }, { 
              value: '选项4',
              label: '英国'
            }],
            value: '选项1'
          }
        }
        ...
        ...

`这样就是默认选中的中国`

### 禁用某个选项 ###

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          :disabled="item.disabled">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default { 
        data() { 
          return { 
            options: [{ 
              value: '选项1',
              label: '中国'
            }, { 
              value: '选项2',
              label: '韩国'
            }, { 
              value: '选项3',
              label: '日本'
              disabled: true
            }, { 
              value: '选项4',
              label: '英国'
            }],
            value: ''
          }
        }
      }
    </script>

`在el-option中，设定disabled值为 true，即可禁用该选项,如果你在 el-select 标签中直接添加 disabled 属性，那么整个下拉组件就会被禁用`

### 选择时进行搜索 ###

这个功能属于一个比较常用的功能了，就是选择下拉项中的某一个值的时候进行条件搜索。

<template>
      <el-select v-model="value" filterable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default { 
        data() { 
          return { 
            options: [{ 
              value: '选项1',
              label: '中国'
            }, { 
              value: '选项2',
              label: '韩国'
            }, { 
              value: '选项3',
              label: '日本'
            }, { 
              value: '选项4',
              label: '英国'
            }],
            value: ''
          }
        }
      }
    </script>

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

### Select 事件 ###

我列举几个 select 事件，可以参考使用。

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>选中值发生变化时触发</td> 
   <td>目前的选中值</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>当 input 获得焦点时触发</td> 
   <td>(event: Event)</td> 
  </tr> 
  <tr> 
   <td>visible-change</td> 
   <td>下拉框出现/隐藏时触发</td> 
   <td>出现则为 true，隐藏则为 false</td> 
  </tr> 
 </tbody> 
</table>

[Element]: http://element-cn.eleme.io/#/zh-CN