【Element-ui】InputNumber 计数器与Select 选择器

news2025/4/5 21:40:34

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、InputNumber 计数器
    • 1.1 基础用法：
    • 1.2 禁用状态
    • 1.3 步数
    • 1.4 严格步数
    • 1.5 精度
    • 1.6 尺寸
    • 1.7 按钮位置
    • 1.8 Events
    • 1.9 Methods
  • 二、Select 选择器
    • 2.1 基础用法
    • 2.2 有禁用选项
    • 2.3 禁用状态
    • 2.4 可清空单选
    • 2.5 基础多选
    • 2.6 分组
    • 2.7 创建条目
    • 2.8 Select Events
    • 2.8 Select Slots
    • 2.9 Option Group Attributes
    • 2.10 Option Attributes
    • 2.11 Methods
  • 总结

前言

在Web开发中，用户输入和选择是常见的交互行为。为了提供更好的用户体验，前端框架和组件库经常提供丰富的表单元素。本文将重点介绍Element-ui中的两个常用表单组件——InputNumber 计数器和 Select 选择器。这两个组件为用户输入和选择提供了强大而灵活的解决方案，使得开发者能够轻松构建交互性强的界面。

一、InputNumber 计数器

仅允许输入标准的数字值，可定义范围

1.1 基础用法：

要使用它，只需要在el-input-number元素中使用v-model绑定变量即可，变量的初始值即为默认值。

<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

在这里插入图片描述

1.2 禁用状态

disabled属性接受一个Boolean，设置为true即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置min属性和max属性，不设置min和max时，最小值为 0。

<template>
  <el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      }
    }
  };
</script>

1.3 步数

允许定义递增递减的步数控制

设置step属性可以控制步长，接受一个Number。

<template>
  <el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 5
      }
    }
  };
</script>

1.4 严格步数

step-strictly属性接受一个Boolean。如果这个属性被设置为true，则只能输入步数的倍数。

<template>
  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 2
      }
    }
  };
</script>

在这里插入图片描述

1.5 精度

设置 precision 属性可以控制数值精度，接收一个 Number。

<template>
  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      }
    }
  };
</script>

在这里插入图片描述

1.6 尺寸

额外提供了 medium、small、mini 三种尺寸的数字输入框

<template>
  <el-input-number v-model="num1"></el-input-number>
  <el-input-number size="medium" v-model="num2"></el-input-number>
  <el-input-number size="small" v-model="num3"></el-input-number>
  <el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num1: 1,
        num2: 1,
        num3: 1,
        num4: 1
      }
    }
  };
</script>

在这里插入图片描述

1.7 按钮位置

设置 controls-position 属性可以控制按钮位置。

<template>
  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

在这里插入图片描述

1.8 Events

事件名称 说明 回调参数
change 绑定值被改变时触发 currentValue, oldValue
blur 在组件 Input 失去焦点时触发 (event: Event)
focus 在组件 Input 获得焦点时触发 (event: Event)

1.9 Methods

方法名 说明 参数
focus 使 input 获取焦点 -
select 选中 input 中的文字 —

二、Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

2.1 基础用法

适用广泛的基础单选

el-option为每一项
v-model的值为当前被选中的el-option的 value 属性值

<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>

在这里插入图片描述

2.2 有禁用选项

在el-option中，设定disabled值为 true，即可禁用该选项

<template>
  <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>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

在这里插入图片描述

2.3 禁用状态

选择器不可用状态

为el-select设置disabled属性，则整个选择器不可用

<template>
  <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>
</template>
  
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

在这里插入图片描述

2.4 可清空单选

包含清空按钮，可将选择器清空为初始状态

为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

<template>
  <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>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

在这里插入图片描述

2.5 基础多选

适用性较广的基础多选，用 Tag 展示已选项

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

<template>
  <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>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
        value2: []
      }
    }
  }
</script>

在这里插入图片描述

2.6 分组

备选项进行分组展示
使用el-option-group对备选项进行分组，它的label属性为分组名

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option-group
      v-for="group in options"
      :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>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        value: ''
      }
    }
  }
</script>

在这里插入图片描述

2.7 创建条目

可以创建并选中选项中不存在的条目
使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    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: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }
    }
  }
</script>

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

2.8 Select Events

事件名称 说明 回调参数
change 选中值发生变化时触发 目前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
remove-tag 多选模式下移除tag时触发 移除的tag值
clear 可清空的单选模式下用户点击清空按钮时触发 —
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

2.8 Select Slots

name 说明
— Option 组件列表
prefix Select 组件头部内容
empty 无选项时的列表

2.9 Option Group Attributes

参数 说明 类型 可选值 默认值
label 分组的组名 string — —
disabled 是否将该分组下所有选项置为禁用 boolean — false

2.10 Option Attributes

参数 说明 类型 可选值 默认值
value 选项的值 string/number/object — —
label 选项的标签，若不设置则默认与 value 相同 string/number — —
disabled 是否禁用该选项 boolean — false

2.11 Methods

方法名 说明 参数
focus 使 input 获取焦点 -
blur 使 input 失去焦点，并隐藏下拉框 -

总结

Element-ui中的 InputNumber 计数器和 Select 选择器为我们提供了强大的表单元素，简化了用户输入和选择的处理。通过这两个组件，我们能够轻松实现各种数字输入和选项选择的交互，提升了用户体验。在实际项目中，灵活运用这些组件能够更加高效地构建出符合需求的前端界面。希望本文对于使用Element-ui中这两个组件的开发者有所帮助。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

超大规模集成电路设计----学习框架（一）

超大规模集成电路设计----学习框架（一）

本文仅供学习&#xff0c;不作任何商业用途&#xff0c;严禁转载。绝大部分资料来自----数字集成电路——电路、系统与设计(第二版)及中国科学院段成华教授PPT 超大规模集成电路设计----学习框架&#xff08;一&#xff09; 这门课在学什么&#xff1f;这门课该怎么学&#xf…
阅读更多...
Java LeetCode篇-深入了解关于栈的经典解法（栈实现：中缀表达式转后缀）

Java LeetCode篇-深入了解关于栈的经典解法（栈实现：中缀表达式转后缀）

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 中缀表达式转后缀说明 1.1 实现中缀表达式转后缀思路 2.0 逆波兰表达式求值 2.1 实现逆波兰表达式求值思路 3.0 有效的括号 3.1 实现有效的括号思路 4.0 栈的压…
阅读更多...
魔法时代：人工智能如何重塑我们的日常生活

魔法时代：人工智能如何重塑我们的日常生活

现在的我们正在目睹一个新时代的到来——人工智能(AI)的时代。这个时代由算法驱动&#xff0c;由数据精炼&#xff0c;由机器学习引领&#xff0c;正逐渐成为我们生活中不可或缺的一部分。人工智能像一位魔法师&#xff0c;以其独特的能力&#xff0c;从根本上改变了我们的生活…
阅读更多...
力扣题:字符的统计-12.2

力扣题:字符的统计-12.2

力扣题-12.2 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;423. 从英文中重建数字 解题思想&#xff1a;有的单词通过一个字母就可以确定&#xff0c;依次确定即可 class Solution(object):def originalDigits(self, s):""":typ…
阅读更多...
Hdoop学习笔记（HDP）-Part.14 安装YARN+MR

Hdoop学习笔记（HDP）-Part.14 安装YARN+MR

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …
阅读更多...
可用的镜像 yum 源

可用的镜像 yum 源

目录 ftp.sjtu.edu.cn 镜像 yum 源centos 的镜像 yum 源 mirrors.sohu.comcentos 的镜像 yum 源 mirrors.163.comcentos 的镜像 yum 源 ftp.sjtu.edu.cn 镜像 yum 源 镜像 yum 源地址 &#xff1a; http://ftp.sjtu.edu.cn/centos/ centos 的镜像 yum 源 http://ftp.sjtu.edu…
阅读更多...
git如何关联克隆远程仓库

git如何关联克隆远程仓库

一、添加远程仓库 之前我们仅仅是在本地创建了一个Git本地仓库&#xff0c;这里我们再在GitHub创建一个Git远程仓库&#xff0c;并且让这两个仓库进行远程同步&#xff0c;这样&#xff0c;GitHub上的仓库既可以作为备份&#xff0c;又可以让其他人通过该仓库来协作开发。 1.…
阅读更多...
面试--各种场景问题总结

面试--各种场景问题总结

1.在开发过程中&#xff0c;你是如何保证机票系统的正常运行的&#xff1f; 用户、测试、监控和日志、安全措施、数据备份、系统设计、需求分析 2.在机票系统开发过程中&#xff0c;你最有成就的事情&#xff0c;为什么&#xff1f; 用户体验感、高可用和稳定性、客户满意度、系…
阅读更多...
使用Visual Studio创建第一个C代码工程

使用Visual Studio创建第一个C代码工程

文章目录 2019创建C工程创建C文件运行 上一节我们使用记事本编辑C代码&#xff0c;在命令行运行文件&#xff0c;这种方式只是作为对编译器的了解&#xff0c;实际的开发中一般使用集成开发环境比较多&#xff0c;因为 集成开发环境操作比较简单&#xff0c;通常可编辑&#x…
阅读更多...
cc-product-waterfall仿天猫、淘宝购物车店铺商品列表组件

cc-product-waterfall仿天猫、淘宝购物车店铺商品列表组件

cc-product-waterfall仿天猫、淘宝购物车店铺商品列表组件 引言 在电商应用中&#xff0c;购物车体验的优化对于提升用户满意度和转化率至关重要。在本文中&#xff0c;我们将深入探讨如何使用cc-product-waterfall组件&#xff0c;结合uni-number-box和xg-widget&#xff0c;…
阅读更多...
WebGL笔记：图形缩放的原理和实现

WebGL笔记：图形缩放的原理和实现

缩放 1 &#xff09;原理 缩放可以理解为对向量长度的改变&#xff0c;或者对向量坐标分量的同步缩放 如下图&#xff0c;比如让向量OA 收缩到点B的位置&#xff0c;也就是从OA变成OB&#xff0c;缩放了一半 2 &#xff09;公式 已知 点A的位置是(ax,ay,az)点A基于原点內缩了…
阅读更多...
L1-009：N个数求和

L1-009：N个数求和

目录 ⭐题目描述⭐ ⭐分析 ⭐程序代码 运行结果 ⭐文案分享⭐ ⭐题目描述⭐ 本题的要求很简单&#xff0c;就是求N个数字的和。麻烦的是&#xff0c;这些数字是以有理数分子/分母的形式给出的&#xff0c;你输出的和也必须是有理数的形式。 输入格式&#xff1a; 输入第一行给出…
阅读更多...
GAN：PacGAN-生成对抗网络中两个样本的威力

GAN：PacGAN-生成对抗网络中两个样本的威力

论文&#xff1a;https://arxiv.org/pdf/1712.04086.pdf 代码&#xff1a;GitHub - fjxmlzn/PacGAN: [NeurIPS 2018] [JSAIT] PacGAN: The power of two samples in generative adversarial networks 发表&#xff1a;2016 一、摘要 1&#xff1a;GAN最重大的缺陷是&#xf…
阅读更多...
数据库管理-第121期 我为什么写文章（202301203）

数据库管理-第121期 我为什么写文章（202301203）

数据库管理-第121期 我为什么写文章&#xff08;202301203&#xff09; 其实呢~大周末我不是太想写文章的&#xff0c;周五HaloDB起了个头还有一堆可以做的事情都计划到下周了&#xff0c;但是昨天发生了一件事情&#xff0c;让我很是不开心&#xff1a;强盗逻辑&#xff0c;白…
阅读更多...
部署 Draw.io 思维导图工具

部署 Draw.io 思维导图工具

1&#xff09;Draw.io 介绍 提到流程图&#xff0c;大家第一时间可能会想到 Visio&#xff0c;不可否认&#xff0c;VIsio 确实是功能强大&#xff0c;但是软件为收费&#xff0c;并且因为其功能强大&#xff0c;导致安装需要很多的系统内存&#xff0c;并且是不可跨平台使用。…
阅读更多...
分治-归并算法——LCR 170. 交易逆序对的总数

分治-归并算法——LCR 170. 交易逆序对的总数

文章目录 &#x1f33c;0. 归并排序&#x1f33b;1. 题目&#x1f33c;2. 算法原理&#x1f337;3. 代码实现 &#x1f33c;0. 归并排序 归并排序是典型的分治&#xff0c;将数组分成若干个子数组&#xff0c;数组两两比较&#xff0c;不是很清楚的&#xff0c;可以查看此篇文…
阅读更多...
VUE设计与实现共读系列之ref的实现【响应式原理】

VUE设计与实现共读系列之ref的实现【响应式原理】

前言 我们先顺一下vue使用响应式数据的流程&#xff1a; vue 是通过 ref 和 reactive 来创建响应式值&#xff0c;改变响应式值&#xff0c;视图跟着发生变化。 我们今天就来看一下ref和reactive是如何实现的 准备 首先&#xff0c;打开ref函数的位置 我们可以看到一个被re…
阅读更多...
10行代码实现vue路由最简单的登陆拦截

10行代码实现vue路由最简单的登陆拦截

需求&#xff1a;不涉及任何角色权限&#xff0c;基本实现目标&#xff0c;有token就可查看任何页面&#xff0c;否则就去登陆&#xff0c;来一步步实现 1. 创建你的路由页面&#xff0c;此处略了 2. 导航守卫拦截判断思路 // 创建路由 const router createRouter({history…
阅读更多...
Python----字典练习

Python----字典练习

相关链接&#xff1a;Python---字典的增、删、改、查操作_python中字典的增删改查-CSDN博客 Python---字典---dict-CSDN博客 Python---引用变量与可变、非可变类型-CSDN博客 重点&#xff1a; 字典中的 key &#xff08;就是键&#xff09;可以是很多数据类型&#xff08;…
阅读更多...
对比ProtoBuf和JSON的序列化和反序列化能力

对比ProtoBuf和JSON的序列化和反序列化能力

1.序列化能力对比验证 在这里让我们分别使用PB与JSON的序列化与反序列化能力&#xff0c;对值完全相同的一份结构化数据进行不同次数的性能测试。 为了可读性&#xff0c;下面这一份文本使用JSON格式展示了需要被进行测试的结构化数据内容: {"age" : 20,"name…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023