Element el |
您所在的位置:网站首页 › 下拉框怎么测试颜色 › Element el |
点此查看全部文字教程、视频教程、源代码 本文目录 1. 用途2. 数据绑定2.1 固定选项2.2 选项绑定数组 3. 功能效果3.1 可清空选项3.2 多选3.3 可搜索 4. 事件响应5. 小结 1. 用途el-select即选择器,用于从若干个候选项中选择其中一个(或者多个)。 在传统网页开发中,选择器经常被称作下拉框、下拉列表,是最常用的表单元素之一。 2. 数据绑定el-select的数据可以来源于固定的若干个选项,或者通过v-for绑定一个数组。 2.1 固定选项固定选项时,选中项的value与selectedValue双向绑定。 数据来源--固定选项--选中值{{selectedValue}}效果如下: 2.2 选项绑定数组选项绑定数组,可以通过v-for循环进行动态绑定。 数据来源--绑定数组--选中值{{selectedCityId}} export default { data() { return { selectedCityId:'', citys: [{ id: 1, name: '北京' }, { id: 2, name: '上海' }] } } }效果如下: 3. 功能效果el-select还封装了一些常用的功能效果,只需要填写一些参数,即可轻松实现这些功能。 3.1 可清空选项有时候我们希望可以清空已选中的项,此时为el-select添加clearable属性即可。 可清空选项效果如下,点击选择器右侧的叉号图标即可清空已选中的选项。 3.2 多选可以为el-select设置multiple启用多选,注意此时绑定的value为选中项的数组。 多选--选中值{{selectedIds}} export default { data() { return { selectedIds: [], citys: [{ id: 1, name: '北京' }, { id: 2, name: '上海' }] } } }效果如下: 3.3 可搜索如果候选项很多,那么一个个去找非常费劲。el-select提供了搜索功能,只需要为el-select设置filterable即可启用搜索功能。 可搜索效果如下,只需要在选择器的输入栏内输入一个关键词,即可筛选出含有关键词的选项,非常方便好用。 4. 事件响应下拉框最常用的事件,就是选中项发生变化了,可以使用@change绑定对应方法。 选中项变化 methods: { cityChange() { console.log("选中城市id:", this.selectedCityId); } }需要注意的是,清空选中项时,选中项也发生了变化,也会触发cityChange方法。 5. 小结选择器用途十分广泛,el-select比原生下拉框的功能要丰富很多很多,非常强大易用。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |