Element-UI中Select选择器讲解(el-select详解)
【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!
博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步!
吾等采石之人,应怀大教堂之心,愿你们奔赴在各自的热爱中…
关于下拉框相关知识点总结
今天来整理一下目前最喜欢的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>
本篇相关属性就整理到这里了,后续继续整理分享前端相关知识,未完待续……
The best investment is to invest in yourself.
2020.11.22 愿你们奔赴在自己的热爱里!
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- 详解element-ui中el-select的默认选择项问题
- elementUI el-select中el-option中插入图片
- 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
- element-ui 级联选择器 el-cascader更改v-model值为字符串后报错
- Vue + Element-ui的下拉框el-select获取额外参数详解
- element-ui 远程搜索组件el-select在项目中组件化的实现代码
- 详解为element-ui的Select和Cascader添加弹层底部操作按钮
- element-ui 的el-select修改背景色没有效果
- 详解elementui之el-image-viewer(图片查看器)
- el-select值的回显问题:如何使element-ui的下拉框显示label值
- element-UI中监听el-select下拉框可搜索时候,filter-method自定义搜索方法
- Vue ElementUI Select 选择器实现动态options
- vue+element-ui Select 选择器获取选择项
- elementUI select 组件使用详解
- 详解element-ui日期时间选择器的日期格式化问题
- vue elementui el-form rules动态验证的实例代码详解
- elementUI select组件使用及注意事项详解
- 详解VUE 对element-ui中的ElTableColumn扩展
- element-ui中el-select下拉框数据过多,用pinyin-match实现拼音、首字母、汉字等模糊搜索