Element中Select选择器的实现

 更新时间:2022年03月24日 09:23:53   作者:辰兮要努力  
本文主要介绍了Element中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>

在这里插入图片描述

 

相关文章

  • vue实现可移动的悬浮按钮

    vue实现可移动的悬浮按钮

    这篇文章主要为大家详细介绍了vue实现可移动的悬浮按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Vue如何获取url路由地址和参数简单示例

    Vue如何获取url路由地址和参数简单示例

    这篇文章主要给大家介绍了Vue如何获取url路由地址和参数的相关资料,通过简单的代码示例,帮助读者快速掌握Vue路由的基本用法,需要的朋友可以参考下
    2023-03-03
  • 分分钟玩转Vue.js组件

    分分钟玩转Vue.js组件

    这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue缓存之keep-alive的理解和应用详解

    vue缓存之keep-alive的理解和应用详解

    这篇文章主要介绍了vue缓存之keep-alive的理解和应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue3响应式转换常用API操作示例代码

    vue3响应式转换常用API操作示例代码

    在Vue 3中,响应式系统得到了显著改善,包括使用Composition API时更加灵活的状态管理,这篇文章主要介绍了vue3响应式转换常用API操作示例代码,需要的朋友可以参考下
    2024-08-08
  • vue如何解决循环引用组件报错的问题

    vue如何解决循环引用组件报错的问题

    这篇文章主要介绍了vue如何解决循环引用组件报错的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue项目实现通过ip地址访问和localhost访问方式

    vue项目实现通过ip地址访问和localhost访问方式

    这篇文章主要介绍了vue项目实现通过ip地址访问和localhost访问方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3通过canvas实现图片圈选功能

    vue3通过canvas实现图片圈选功能

    这篇文章将给大家详细介绍了vue3如何通过canvas实现图片圈选功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴快来跟随小编一起学习一下吧
    2023-12-12
  • Vue实现导出word文档的示例详解

    Vue实现导出word文档的示例详解

    这篇文章主要为大家详细介绍了Vue如何使用第三方库file-saver和html-docx-js实现导出word文档的效果,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)

    Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)

    v-bind是Vue.js中的一个核心指令,用于在Vue组件或DOM元素上绑定数据属性,下面这篇文章主要给大家介绍了关于Vue3在css中使用v-bind绑定js/ts变量的相关资料,也可以在scss和less中使用方式,需要的朋友可以参考下
    2024-04-04

最新评论