zoukankan      html  css  js  c++  java

  • Select 选择器

    Select 选择器

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

    基础用法

    适用广泛的基础单选

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

     1 <template>
 2   <el-select v-model="value" placeholder="请选择">
 3     <el-option
 4       v-for="item in options"
 5       :key="item.value"
 6       :label="item.label"
 7       :value="item.value">
 8     </el-option>
 9   </el-select>
10 </template>
11 
12 <script>
13   export default {
14     data() {
15       return {
16         options: [{
17           value: '选项1',
18           label: '黄金糕'
19         }, {
20           value: '选项2',
21           label: '双皮奶'
22         }, {
23           value: '选项3',
24           label: '蚵仔煎'
25         }, {
26           value: '选项4',
27           label: '龙须面'
28         }, {
29           value: '选项5',
30           label: '北京烤鸭'
31         }],
32         value: ''
33       }
34     }
35   }
36 </script>
    View Code

    有禁用选项

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

     1 <template>
 2   <el-select v-model="value2" placeholder="请选择">
 3     <el-option
 4       v-for="item in options2"
 5       :key="item.value"
 6       :label="item.label"
 7       :value="item.value"
 8       :disabled="item.disabled">
 9     </el-option>
10   </el-select>
11 </template>
12 
13 <script>
14   export default {
15     data() {
16       return {
17         options2: [{
18           value: '选项1',
19           label: '黄金糕'
20         }, {
21           value: '选项2',
22           label: '双皮奶',
23           disabled: true
24         }, {
25           value: '选项3',
26           label: '蚵仔煎'
27         }, {
28           value: '选项4',
29           label: '龙须面'
30         }, {
31           value: '选项5',
32           label: '北京烤鸭'
33         }],
34         value2: ''
35       }
36     }
37   }
38 </script>
    View Code

    禁用状态

    选择器不可用状态

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

     1 <template>
 2   <el-select v-model="value3" disabled placeholder="请选择">
 3     <el-option
 4       v-for="item in options"
 5       :key="item.value"
 6       :label="item.label"
 7       :value="item.value">
 8     </el-option>
 9   </el-select>
10 </template>
11   
12 <script>
13   export default {
14     data() {
15       return {
16         options: [{
17           value: '选项1',
18           label: '黄金糕'
19         }, {
20           value: '选项2',
21           label: '双皮奶'
22         }, {
23           value: '选项3',
24           label: '蚵仔煎'
25         }, {
26           value: '选项4',
27           label: '龙须面'
28         }, {
29           value: '选项5',
30           label: '北京烤鸭'
31         }],
32         value3: ''
33       }
34     }
35   }
36 </script>
    View Code

    可清空单选

    包含清空按钮，可将选择器清空为初始状态

    为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

     1 <template>
 2   <el-select v-model="value4" clearable placeholder="请选择">
 3     <el-option
 4       v-for="item in options"
 5       :key="item.value"
 6       :label="item.label"
 7       :value="item.value">
 8     </el-option>
 9   </el-select>
10 </template>
11 
12 <script>
13   export default {
14     data() {
15       return {
16         options: [{
17           value: '选项1',
18           label: '黄金糕'
19         }, {
20           value: '选项2',
21           label: '双皮奶'
22         }, {
23           value: '选项3',
24           label: '蚵仔煎'
25         }, {
26           value: '选项4',
27           label: '龙须面'
28         }, {
29           value: '选项5',
30           label: '北京烤鸭'
31         }],
32         value4: ''
33       }
34     }
35   }
36 </script>
    View Code

    基础多选

    适用性较广的基础多选，用 Tag 展示已选项

    为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

     1 <template>
 2   <el-select v-model="value5" multiple placeholder="请选择">
 3     <el-option
 4       v-for="item in options"
 5       :key="item.value"
 6       :label="item.label"
 7       :value="item.value">
 8     </el-option>
 9   </el-select>
10 
11   <el-select
12     v-model="value11"
13     multiple
14     collapse-tags
15     style="margin-left: 20px;"
16     placeholder="请选择">
17     <el-option
18       v-for="item in options"
19       :key="item.value"
20       :label="item.label"
21       :value="item.value">
22     </el-option>
23   </el-select>
24 </template>
25 
26 <script>
27   export default {
28     data() {
29       return {
30         options: [{
31           value: '选项1',
32           label: '黄金糕'
33         }, {
34           value: '选项2',
35           label: '双皮奶'
36         }, {
37           value: '选项3',
38           label: '蚵仔煎'
39         }, {
40           value: '选项4',
41           label: '龙须面'
42         }, {
43           value: '选项5',
44           label: '北京烤鸭'
45         }],
46         value5: [],
47         value11: []
48       }
49     }
50   }
51 </script>
    View Code

    自定义模板

    可以自定义备选项

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

    <template>
  <el-select v-model="value6" placeholder="请选择">
    <el-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>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
        value6: ''
      }
    }
  }
</script>

    　　

    分组

    备选项进行分组展示

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

     1 <template>
 2   <el-select v-model="value7" placeholder="请选择">
 3     <el-option-group
 4       v-for="group in options3"
 5       :key="group.label"
 6       :label="group.label">
 7       <el-option
 8         v-for="item in group.options"
 9         :key="item.value"
10         :label="item.label"
11         :value="item.value">
12       </el-option>
13     </el-option-group>
14   </el-select>
15 </template>
16 
17 <script>
18   export default {
19     data() {
20       return {
21         options3: [{
22           label: '热门城市',
23           options: [{
24             value: 'Shanghai',
25             label: '上海'
26           }, {
27             value: 'Beijing',
28             label: '北京'
29           }]
30         }, {
31           label: '城市名',
32           options: [{
33             value: 'Chengdu',
34             label: '成都'
35           }, {
36             value: 'Shenzhen',
37             label: '深圳'
38           }, {
39             value: 'Guangzhou',
40             label: '广州'
41           }, {
42             value: 'Dalian',
43             label: '大连'
44           }]
45         }],
46         value7: ''
47       }
48     }
49   }
50 </script>
    View Code

    可搜索

    可以利用搜索功能快速查找选项

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

     1 <template>
 2   <el-select v-model="value8" filterable placeholder="请选择">
 3     <el-option
 4       v-for="item in options"
 5       :key="item.value"
 6       :label="item.label"
 7       :value="item.value">
 8     </el-option>
 9   </el-select>
10 </template>
11 
12 <script>
13   export default {
14     data() {
15       return {
16         options: [{
17           value: '选项1',
18           label: '黄金糕'
19         }, {
20           value: '选项2',
21           label: '双皮奶'
22         }, {
23           value: '选项3',
24           label: '蚵仔煎'
25         }, {
26           value: '选项4',
27           label: '龙须面'
28         }, {
29           value: '选项5',
30           label: '北京烤鸭'
31         }],
32         value8: ''
33       }
34     }
35   }
36 </script>
    View Code

    远程搜索

    从服务器搜索数据，输入关键字进行查找

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

     1 <template>
 2   <el-select
 3     v-model="value9"
 4     multiple
 5     filterable
 6     remote
 7     reserve-keyword
 8     placeholder="请输入关键词"
 9     :remote-method="remoteMethod"
10     :loading="loading">
11     <el-option
12       v-for="item in options4"
13       :key="item.value"
14       :label="item.label"
15       :value="item.value">
16     </el-option>
17   </el-select>
18 </template>
19 
20 <script>
21   export default {
22     data() {
23       return {
24         options4: [],
25         value9: [],
26         list: [],
27         loading: false,
28         states: ["Alabama", "Alaska", "Arizona",
29         "Arkansas", "California", "Colorado",
30         "Connecticut", "Delaware", "Florida",
31         "Georgia", "Hawaii", "Idaho", "Illinois",
32         "Indiana", "Iowa", "Kansas", "Kentucky",
33         "Louisiana", "Maine", "Maryland",
34         "Massachusetts", "Michigan", "Minnesota",
35         "Mississippi", "Missouri", "Montana",
36         "Nebraska", "Nevada", "New Hampshire",
37         "New Jersey", "New Mexico", "New York",
38         "North Carolina", "North Dakota", "Ohio",
39         "Oklahoma", "Oregon", "Pennsylvania",
40         "Rhode Island", "South Carolina",
41         "South Dakota", "Tennessee", "Texas",
42         "Utah", "Vermont", "Virginia",
43         "Washington", "West Virginia", "Wisconsin",
44         "Wyoming"]
45       }
46     },
47     mounted() {
48       this.list = this.states.map(item => {
49         return { value: item, label: item };
50       });
51     },
52     methods: {
53       remoteMethod(query) {
54         if (query !== '') {
55           this.loading = true;
56           setTimeout(() => {
57             this.loading = false;
58             this.options4 = this.list.filter(item => {
59               return item.label.toLowerCase()
60                 .indexOf(query.toLowerCase()) > -1;
61             });
62           }, 200);
63         } else {
64           this.options4 = [];
65         }
66       }
67     }
68   }
69 </script>
    View Code

    创建条目

    可以创建并选中选项中不存在的条目

    使用allow-create属性即可通过在输入框中输入文字来创建新的条目。

    注意此时filterable必须为真。

    本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

     1 <template>
 2   <el-select
 3     v-model="value10"
 4     multiple
 5     filterable
 6     allow-create
 7     default-first-option
 8     placeholder="请选择文章标签">
 9     <el-option
10       v-for="item in options5"
11       :key="item.value"
12       :label="item.label"
13       :value="item.value">
14     </el-option>
15   </el-select>
16 </template>
17 
18 <script>
19   export default {
20     data() {
21       return {
22         options5: [{
23           value: 'HTML',
24           label: 'HTML'
25         }, {
26           value: 'CSS',
27           label: 'CSS'
28         }, {
29           value: 'JavaScript',
30           label: 'JavaScript'
31         }],
32         value10: []
33       }
34     }
35   }
36 </script>
    View Code

    如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

    Select Attributes

    参数说明类型可选值默认值
    multiple 是否多选 boolean — false
    disabled 是否禁用 boolean — false
    value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填 string — value
    size 输入框尺寸 string medium/small/mini —
    clearable 单选时是否可以清空选项 boolean — false
    collapse-tags 多选时是否将选中值按文字的形式展示 boolean — false
    multiple-limit 多选时用户最多可以选择的项目数，为 0 则不限制 number — 0
    name select input 的 name 属性 string — —
    auto-complete select input 的 autocomplete 属性 string — off
    placeholder 占位符 string — 请选择
    filterable 是否可搜索 boolean — false
    allow-create 是否允许用户创建新条目，需配合 filterable 使用 boolean — false
    filter-method 自定义搜索方法 function — —
    remote 是否为远程搜索 boolean — false
    remote-method 远程搜索方法 function — —
    loading 是否正在从远程获取数据 boolean — false
    loading-text 远程加载时显示的文字 string — 加载中
    no-match-text 搜索条件无匹配时显示的文字 string — 无匹配数据
    no-data-text 选项为空时显示的文字 string — 无数据
    popper-class Select 下拉框的类名 string — —
    reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 boolean — false
    default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 boolean - false
    popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false boolean - true

    Select Events

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

    Option Group Attributes

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

    Option Attributes

    参数说明类型可选值默认值
    value 选项的值 string/number/object — —
    label 选项的标签，若不设置则默认与 value 相同 string/number — —
    disabled 是否禁用该选项 boolean — false

    Methods

    方法名说明参数
    focus 使 input 获取焦点 -
  • 相关阅读:
    javascript之reduce()方法的使用
    微信小程序开发小结
    小程序解析html之富文本插件wxParse
    vue中复选框全选与反选
    vue好用的图片查看器(v-viewer插件)
    Vue利用canvas实现移动端手写板
    file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度
    js中文输入法字符串截断
    js实现表单序列化的两种方法。
    JS实现剪切板添加网站版权、来源
  • 原文地址：https://www.cnblogs.com/grt322/p/8553318.html
Copyright © 2011-2022 走看看