ElementUI Form：Select 选择器

ElementUI安装与使用指南

Select 选择器

点击下载learnelementuispringboot项目源码

效果图

在这里插入图片描述
el-select.vue（Select选择器）页面效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目里el-select.vue代码

<script>
export default {
  name: 'el_select',
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶',
        disabled: true
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value1: [],
      value2: [],
      cities: [{
        value: 'Beijing',
        label: '北京'
      }, {
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Nanjing',
        label: '南京'
      }, {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }],
      value3: '',
      options2: [{
        label: '热门城市',
        options: [{
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京'
        }]
      }, {
        label: '城市名',
        options: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Dalian',
          label: '大连'
        }]
      }],
      value4: '',
      options3: [],
      value5: [],
      list: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],
      options4: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      value6: [],
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return {value: `value:${item}`, label: `label:${item}`};
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options3 = this.list.filter(item => {
            return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options3 = [];
      }
    }
  },
}

</script>

<template>
  <div class="el_select_root">
    <h2>Select 选择器</h2>
    <h5>当选项过多时，使用下拉菜单展示并选择内容。</h5>

    <h3>一、基础用法</h3>
    <h5>适用广泛的基础单选</h5>
    <h5>v-model的值为当前被选中的el-option的 value 属性值</h5>
    <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>

    <h3>二、有禁用选项</h3>
    <h5>在el-option中，设定disabled值为 true，即可禁用该选项</h5>
    <el-select v-model="value" placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
      </el-option>
    </el-select>

    <h3>三、禁用状态</h3>
    <h5>选择器不可用状态</h5>
    <h5>为el-select设置disabled属性，则整个选择器不可用</h5>
    <el-select v-model="value" disabled placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <h3>四、可清空单选</h3>
    <h5>包含清空按钮，可将选择器清空为初始状态</h5>
    <p>为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。</p>
    <el-select v-model="value" clearable placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <h3>五、基础多选</h3>
    <h5>适用性较广的基础多选，用 Tag 展示已选项</h5>
    <p>
      为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。
      默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。
    </p>
    <el-select v-model="value1" multiple placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <el-select
        v-model="value2"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <h3>六、自定义模板</h3>
    <h5>可以自定义备选项</h5>
    <P>将自定义的 HTML 模板插入el-option的 slot 中即可。</P>
    <el-select v-model="value3" placeholder="请选择">
      <el-option
          v-for="item in cities"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px; margin-left: 20px;">{{ item.value }}</span>
      </el-option>
    </el-select>

    <h3>七、分组</h3>
    <h5>备选项进行分组展示</h5>
    <p>使用el-option-group对备选项进行分组，它的label属性为分组名</p>
    <el-select v-model="value4" placeholder="请选择">
      <el-option-group
          v-for="group in options2"
          :key="group.label"
          :label="group.label">
        <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-option-group>
    </el-select>

    <h3>八、可搜索</h3>
    <h5>可以利用搜索功能快速查找选项</h5>
    <p>
      为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，
      可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。
    </p>
    <el-select v-model="value" filterable placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <h3>九、远程搜索</h3>
    <h5>从服务器搜索数据，输入关键字进行查找</h5>
    <p>
      为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，
      它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，
      且其值需具有唯一性，比如此例中的item.value。
    </p>
    <el-select
        v-model="value5"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading">
      <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <h3>十、创建条目</h3>
    <h5>可以创建并选中选项中不存在的条目</h5>
    <p>使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，
      在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
    </p>
    <h5>如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。</h5>
    <el-select
        v-model="value6"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择文章标签">
      <el-option
          v-for="item in options4"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
  </div>

</template>

<style>
.el_select_root {
  margin-left: 300px;
  margin-right: 300px;
  text-align: left;
}
</style>

Select Attributes

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Select Events

在这里插入图片描述

Select Slots

在这里插入图片描述

Option Group Attributes

在这里插入图片描述

Option Attributes

在这里插入图片描述

Methods

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/363891.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode刷题:使用栈解决150. 逆波兰表达式求值

LeetCode刷题:使用栈解决150. 逆波兰表达式求值

给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或者另一个表达式。两个…
阅读更多...
泰迪智能科技大模型微调项目训练营已开营

泰迪智能科技大模型微调项目训练营已开营

泰迪智能科技大模型微调项目训练营开营 跟张良均老师学大数据人工智能 项目一&#xff1a;医疗诊疗对话意图识别 项目二&#xff1a;中医问答系统 项目三&#xff1a;某平台股票评论情感识别 学习流程&#xff1a; 项目一&#xff1a;医疗诊疗对话…
阅读更多...
validator 对象校验,自定义校验实现

validator 对象校验,自定义校验实现

一、导入validator工具需要的jar包 <dependency><groupId>org.hibernate</groupId><artifactId>hibernate-validator</artifactId><version>4.1.0.Final</version></dependency><dependency><groupId>javax.valid…
阅读更多...
SketchBook 2022下载安装教程，保姆级教程，操作简单，小白也能轻松搞定，附安装包和工具

SketchBook 2022下载安装教程，保姆级教程，操作简单，小白也能轻松搞定，附安装包和工具

前言 Autodesk SketchBook是一款新一代的自然画图软件&#xff0c;软件界面新颖动人&#xff0c;功能强大&#xff0c;仿手绘效果逼真&#xff0c;笔刷工具分为铅笔&#xff0c;毛笔&#xff0c;马克笔&#xff0c;制图笔&#xff0c;水彩笔&#xff0c;油画笔&#xff0c;喷枪…
阅读更多...
原来你的Windows自带沙盒功能！

原来你的Windows自带沙盒功能！

什么是Windows沙盒&#xff1f; Windows沙盒是一种虚拟化技术&#xff0c;允许用户在安全隔离的环境中运行不受信任的应用程序。它是Windows 10操作系统的一个特性&#xff0c;旨在提高系统的安全性&#xff0c;防止潜在的威胁对主系统造成影响。 启用Windows沙盒 确保系统满…
阅读更多...
【TCP】流量控制和拥塞控制

【TCP】流量控制和拥塞控制

前言 TCP&#xff08;传输控制协议&#xff09;是互联网协议&#xff08;IP&#xff09;网络传输层协议&#xff0c;负责控制数据包的顺序和流量控制&#xff0c;以防止网络拥塞和数据丢失。TCP流量控制和拥塞控制是确保网络有效通信的重要机制。具体分析如下&#xff1a; 流…
阅读更多...
单细胞scRNA-seq测序基础知识笔记

单细胞scRNA-seq测序基础知识笔记

单细胞scRNA-seq测序基础知识笔记 scRNA-seq技术scRNA-seq 分析流程数据预处理聚类标准化数据筛选有用的数据数据降维聚类 Clustering 注释细胞类型 scRNA数据分析结尾 该笔记来源于 B站up 江湾青年 scRNA-seq技术 首先是如何测序&#xff0c;上图瓶中有很多细胞&#xff0c;…
阅读更多...
AD24-原理图与PCB交互设置及PCB常用快捷键汇总

AD24-原理图与PCB交互设置及PCB常用快捷键汇总

一、原理图与PCB交互设置 1、在原理图页&#xff0c;工具-交叉选择模式 2、设置完成后。在原理图页选择器件&#xff0c;然后再PCB页也会相应被选中 3、一般将网络与Pin脚的勾去掉 4、整齐排列 5、TC&#xff1a;查找网络、器件、Pin脚 二、PCB常用快捷键汇总
阅读更多...
高效远控管理 向日葵企业版统计报表与自动分组解析

高效远控管理 向日葵企业版统计报表与自动分组解析

高效远控管理&#xff01;向日葵企业版统计报表与自动分组解析企业之所以引入商用远程控制方案&#xff0c;一个很大的因素就是因为需要对高频率、多设备的远程控制需求以及IT设备本身进行高效管理&#xff0c;因此一款优质的商用远程控制方案势必需要在这些方面搭载足够完善的…
阅读更多...
idea查看日志的辅助插件 --- Grep Console （高亮、取消高亮）

idea查看日志的辅助插件 --- Grep Console （高亮、取消高亮）

&#x1f680; 分享一款很有用的插件&#xff1a;Grep Console &#x1f680; 我们在查看日志的时候可能会有遗漏&#xff0c;使用这款插件可以让特定的关键词高亮&#xff0c;可以达到不遗漏的效果&#xff01; 如果你是一个开发者或者对日志文件分析感兴趣&#xff0c;不要…
阅读更多...
MySQL原理（四）索引（3）索引失效与索引区分度

MySQL原理（四）索引（3）索引失效与索引区分度

一、索引失效&#xff1a; 首先未使用索引列作为查询条件索引是肯定会生效的&#xff0c;还有其他的情况&#xff0c;索引列做为了查询条件也失效了&#xff1a; ALTER TABLE staffs ADD INDEX idx_staffs_nameAgePos(NAME, age, pos); 1、select 语句、order by语句&#xf…
阅读更多...
x2openEuler 升级实操（centos7.8 to openEuler 20.03）

x2openEuler 升级实操（centos7.8 to openEuler 20.03）

通过 x2openEuler 工具&#xff0c;将 centos 7.8 迁移至 OpenEuler 上&#xff0c;实际感受迁移过程。x2openEuler https://docs.openeuler.org/zh/docs/20.03_LTS_SP1/docs/x2openEuler/x2openEuler.html 环境准备 下载 x2openEuler 安装包 wget https://repo.oepkgs.net/o…
阅读更多...
Nicn的刷题日常之带空格直角三角形图案

Nicn的刷题日常之带空格直角三角形图案

1.题目描述 描述 KiKi学习了循环&#xff0c;BoBo老师给他出了一系列打印图案的练习&#xff0c;该任务是打印用“*”组成的带空格直角三角形图案。 输入描述&#xff1a; 多组输入&#xff0c;一个整数&#xff08;2~20&#xff09;&#xff0c;表示直角三角形直角边的长度&am…
阅读更多...
Linux 指令

Linux 指令

Linux 指令 1 登入/登出1.1 关机1.2 重启1.3 切用户 2 文件和目录管理2.1 目录操作2.2 文件操作2.3 文件内容操作2.4 归档及压缩 3 文本编辑器 vim3.1 命令模式3.2 输入模式3.3 末行模式 4 用户和组管理4.1 用户和组帐号概述4.1.1 用户帐号4.1.2 UID和GID 4.2 用户管理 5 组管理…
阅读更多...
算法：箱子之形摆放

算法：箱子之形摆放

一、算法描述及解析 要求将一批箱子按从上到下以‘之’字形的顺序摆放在宽度为 n 的空地上&#xff0c;输出箱子的摆放位置&#xff0c; 例如&#xff1a;箱子ABCDEFG&#xff0c;空地宽为3。 如输入&#xff1a; ABCDEFG 3 输出&#xff1a; AFG BE CD 注&#xff1a;最后一行…
阅读更多...
leetcode 28.找出字符串中第一个匹配项的下标（python版）

leetcode 28.找出字符串中第一个匹配项的下标（python版）

需求 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。 如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入&#xff1a;haystack…
阅读更多...
2023年OceanBase开发者大会：核心内容与学习收获（附大会核心PPT下载）

2023年OceanBase开发者大会：核心内容与学习收获（附大会核心PPT下载）

本次大会邀请了众多业界领袖、技术大咖和开发者&#xff0c;共同探讨数据库领域的技术发展趋势和未来机会&#xff0c;与开发者共同探讨单机分布式、云原生、HTAP 等数据库前沿趋势&#xff0c;分享全新的产品 roadmap&#xff0c;交流场景探索和最佳实践。 一、大会核心内容 …
阅读更多...
v-if及v-for、computed计算属性的使用

v-if及v-for、computed计算属性的使用

v-if 概念及使用 v-if是Vue.js中的一个指令&#xff0c;用于根据表达式的真假值条件性地渲染一块内容。如果表达式的值返回真&#xff0c;则Vue会渲染这块内容&#xff1b;如果返回假&#xff0c;则不渲染。 基本用法: <p v-if"isVisible">看到我了吗&#…
阅读更多...
【vim 学习系列文章 3.2 -- vim 删除 空格】

【vim 学习系列文章 3.2 -- vim 删除 空格】

文章目录 vim 删除行尾空格 vim 删除行尾空格 在代码开发的过程中&#xff0c;经常会遇到行尾有空格的现象&#xff0c;如下&#xff1a; 我们可以在 .vimrc 中通过map 命令来映射删除行尾空格的快捷键&#xff0c;如下&#xff1a; map d<space> :%s/\s*$//g <cr…
阅读更多...
3分钟彻底搞懂Web UI自动化测试之【POM设计模式】

3分钟彻底搞懂Web UI自动化测试之【POM设计模式】

为什么要用POM设计模式 前期&#xff0c;我们学会了使用PythonSelenium编写Web UI自动化测试线性脚本 线性脚本&#xff08;以快递100网站登录举例&#xff09;&#xff1a; import timefrom selenium import webdriver from selenium.webdriver.common.by import Bydriver …
阅读更多...
最新文章

Copyright @ 2022~2023