elementui select 默认选中,element 选择器

　　本文主要介绍元素中选择选择器的实现，根据示例代码进行详细描述。有一定的参考价值，感兴趣的朋友可以参考一下。

　　本篇是关于下拉框相关知识点总结

　　今天我们就来梳理一下目前比较喜欢的el组件el-select:Element官网。

　　最近我所有的梦都是这个组件的相关属性，即clearable和filterable，以及对应的hook函数@change，所以请整理一下以免大睡。

　　下面我们来了解一下element提供的相关案例。

　　模板

　　El-select v-model= value placeholder=请选择

　　el选项

　　v-for=选项中的项目

　　:key=item.value

　　:label=item.label

　　:value=item.value

　　/el选项

　　/el-select

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　选项：[{

　　值：“选项1”，

　　标签:“黄金蛋糕”

　　}, {

　　值：“选项2”，

　　标签:“双份牛奶”

　　}, {

　　值：“选项3”，

　　标签:“蚵仔煎”

　　}, {

　　值：“选项4”，

　　标签:“龙须面”

　　}, {

　　值：“选项5”，

　　标签:“北京烤鸭”

　　}],

　　值：“”

　　}

　　}

　　}

　　/脚本

　　很容易发现我们在遍历一个数组对象，里面显示的是标签，但真正对应的值是value属性。

　　项目中经常会有这样的下拉框。让我们在两种情况中选择。一种是静态的，即下拉框中的数据是前端写的，另一种是比较有趣的，动态的，从数据库中获取的。

　　在我们的实际开发过程中，这个下拉框的大多数属性都是通过后台查询来检索的，例如，如下所示

　　我们展示的是name属性，但是当我们要做查询等其他操作时，真正传递给后台的是id值。

　　{

　　内容:[

　　 {

　　id: 001 ，

　　姓名:晨曦，

　　 },

　　 {

　　id: 002 ，

　　姓名:晨曦要努力，

　　 },

　　 {

　　id: 003 ，

　　姓名:陈打卡，

　　 }

　　],

　　计数:3，

　　代码:成功，

　　消息:成功

　　}

　　事实上，通过多练习，我们可以更好地理解面向对象编程的概念。JavaScript是一种面向对象的编程语言。我们从后台发给前端的是一个带数组的对象，我们只是展示对象的某个属性。

　　我们来分析一下前端思维。

　　前端定义了一个数组来接收这个对象。

　　选项=[]

　　this . options=RES . content；

　　如何获取值？

　　v-for=选项中的项目

　　:key=item.id

　　:label=item.name

　　:value=item.id

　　简单总结一下，options相当于数组对象的集合，遍历显示的是具体的标签，但真正的值是由value属性表示的。

　　下面分享一下最常用的属性。我一般都是加的。详情可参考官网对比基础。

　　清，就是我们常说的可以清。

　　可过滤是指我们可以搜索，当数据量较大时，我们进行相关操作。

　　关于对应钩子函数的应用案例：这个是内置的。当我们改变某个属性时，我们的目的是获取它的值或者执行任何方法。这里可以直接使用@change或者@remove-tag。具体请自行练习。

　　Remove-tag表示：多选模式下移除标签时触发/移除的标签值。

　　如何使用@change @remove-tag

　　El-select v-model= value 1 multiple @ change= change value() @ remove-tag= delete value

　　El-option v-for= item in content :key= item . sid :label= item . sname :value= item . sid /El-option

　　/el-select

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。