Element-UI中Select选择器讲解（el-select详解）

关于下拉框相关知识点总结

今天来整理一下目前最喜欢的el组件 el-select:Element官网

最近真的做梦都是这个组件的相关属性clearable和filterable和对应的钩子函数@change，所以趁着整理下来吧以免夜长梦多

来我们一起学习一下element给我们提供的相关案例

<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: '选项5', label: '北京烤鸭' }], value: '' } }}
</script>

很容易发现我们遍历的是一个数组对象，其中显示出来的是label，但是真正对应的值却是value属性

在项目中经常有这样的下拉框，让我们选择，有两种情况，一种下拉框是静态的，就是下拉框的数据是前端写好的，第二种更加有趣，是动态的，是从数据库中获取的

在我们实际开发过程中这个下拉框的属性大部分是由后台查询取到的，举个案例如下

我们显示出来的是name属性，但是当我们要做其它操作如查询的时候我们真正传给后台的是id值

{ "content": [
 { "id": "001",
 "name": "辰兮",
 },
 { "id": "002", "name": "辰兮要努力",
 },
 { "id": "003", "name": "辰兮打卡",
 }],"count": 3,"code": "success","message": "成功"
}

其实这里我们多实践也可以更好的了解面向对象编程这一个概念，JavaScript就是一个面向对象编程的语言，我们后台发送给前端的就是一个有一个数组对象，我们只是展示了其中对象中的某一个属性

来分析一下前端的思路

前端定义一个数组来接这个对象
options = []this.options = res.content;如何取到值 v-for="item in options" :key="item.id" :label="item.name" :value="item.id"

简单的总结一下 options相当于一个数组对象的集合，遍历出来显示的是具体的label，但是真实的值是value属性代表的

来分享一下最最最常用的属性，我一般都会加上，详情大家也参考官网即可比较基础

clearable 这个我们常用意思是可以清除

filterable 代表我们可以搜索，数据量大的时候我们进行相关操作

关于对应的钩子函数的应用案例：这个是内置的，我们改变某一个属性的时候我们目的就是获取它的值或者执行什么方法，这里用@change或者@remove-tag都是可以直接使用的，详情大家自己实践

remove-tag 代表：多选模式下移除tag时触发 /移除的tag值
如何使用@change @remove-tag

<el-select v-model="value1" multiple  @change="changeValue()" @remove-tag="deleteValue"> <el-option v-for="item in content" :key="item.sId" :label="item.sName" :value="item.sId"> </el-option> </el-select>

Element-UI中Select选择器讲解（el-select详解）相关推荐

element ui 中级联选择器，点击完下拉框收回
在el-cascader标签中添加ref属性,$refs中添加toggleDropDownVisible()方法
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
Element UI极简教程(4)：Select、Switch组件的使用
Java大联盟致力于最高效的Java学习关注 B 站搜索:楠哥教你学Java 获取更多优质视频教程 Select 下拉框 Element UI 的 Select 直接使用 el-select ...
将Element UI的时间选择器（DatePicker）的Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式
将Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式在使用element UI的时间选择器时,控制台输出的是Sat Jan 01 2 ...
element ui DatePicker 日期选择器限制只能选择今天之前或者之后--选择范围时选中第一个后前面的日期应该是禁止状态
picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期 time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...

Element-UI中Select选择器讲解（el-select详解）

Element-UI中Select选择器讲解（el-select详解）相关推荐

最新文章

热门文章