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中使用echarts实现绘制人体动态图

    Vue中使用echarts实现绘制人体动态图

    这篇文章主要为大家详细介绍了Vue中如何使用echarts实现绘制人体动态图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vuex的使用步骤

    vuex的使用步骤

    这篇文章主要介绍了vuex的使用步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue使用监听实现全选反选功能

    vue使用监听实现全选反选功能

    最近做的项目用到了全选全不选功能,于是我就自己动手写了一个,基于vue使用监听实现全选反选功能,具体实例代码大家参考下本文
    2018-07-07
  • Vue3如何根据搜索框内容跳转至本页面指定位置

    Vue3如何根据搜索框内容跳转至本页面指定位置

    在开发中我们经常遇到这样的需求,根据要求跳转至本页面指定位置,这篇文章主要给大家介绍了关于Vue3如何根据搜索框内容跳转至本页面指定位置的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)

    vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)

    这篇文章主要介绍了vue3中如何使用ref和reactive定义和修改响应式数据,这里就是vue3中setup组合式api中如何定义响应式数据并且修改赋值全部内容,需要的朋友可以参考下
    2022-12-12
  • vue如何防范XSS攻击的一些方法

    vue如何防范XSS攻击的一些方法

    xss的攻击方式是发生在用户使用浏览器时候运行,通过嵌入脚本窃取用户信息,本文主要介绍了vue如何防范XSS攻击的一些方法,感兴趣的可以了解一下
    2024-04-04
  • Vue不能下载xls以及文件乱码问题解决

    Vue不能下载xls以及文件乱码问题解决

    最近工作中遇到了一些问题,通过查找相关资料终于找到了相关的解决方法,这篇文章主要给大家介绍了关于Vue不能下载xls以及文件乱码问题解决的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue实现图片按比例缩放问题操作

    vue实现图片按比例缩放问题操作

    这篇文章主要介绍了vue实现图片按比例缩放问题操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 在Vue中定义和调用过滤器的方法

    在Vue中定义和调用过滤器的方法

    过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化,这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下
    2023-09-09
  • Vue提供的三种调试方式你知道吗

    Vue提供的三种调试方式你知道吗

    这篇文章主要为大家介绍了Vue提供的三种调试方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01

最新评论