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

已于 2024-06-18 18:43:13 修改
阅读量2k 收藏 20
点赞数 29
分类专栏： Element-ui 文章标签： ui elementui 前端框架 vue.js vue javascript html5
于 2023-12-03 12:21:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62599305/article/details/134763033
版权

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

文章目录

前言

在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中这两个组件的开发者有所帮助。

人才程序员
关注
  • 29
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue自定义InputNumber 计数器组件
weixin_43882265的博客
08-03 2100
因为原始的el-element的el-input-number组件有问题： 1. 原生组件能输入英文，不能限制只能输入数值； 2. 原始组件能通过键盘上的删除按钮，将数据全部删除，若提交表单的话，就会将一个空值提交给后端，这是错误的，所以前端还要给组件做非空校验，比较麻烦； 3. 原始组件必须要失焦才能触发数据更新，若我们在更改数值后，没有点击失焦，而是直接点击确认提交表单，此时我们以为我们已经将数值改变了，其实数值没有改变，数值还是改变之前的值，若此时刷新页面的话，就能看到数值没有更新，所以必须要在更改数
el-input-number 参数及各种情况
心痛丶如花败
06-23 1万+
el-input-number 参数及各种情况
HTML5 新的 Input 类型
最新发布
2402_83140078的博客
06-23 847
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
el-input-number入门学习
qq_40765784的博客
05-16 4664
学习内容 1.el-input-number的使用 2.加入disabled 3.设置step 4.设置严格step 5.精度设置 代码效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">..
Element el-input-number 计数器详解
热门推荐
程序员大阳
02-02 2万+
1. 用途 计数器是一种特殊的输入框，用来输入数字。除了可以直接键盘输入外，还支持通过按钮对数字进行调整。 2. 基本用法 如下示例，计数器显示数字绑定变量后，可以直接通过+/-按钮调整数值。 基本用法 <el-input-number v-model="num1" label="请输入数量"></el-input-number> <el-divider></el-divider> 效果： 3. 指定最大、最小值 可以为计数器指定数值的最
完美解决elementui input输入框 Number 类型 的坑（上下三角箭头，科学计数法 e，保留小数，整数）
SanOrintea的博客
01-18 1万+
首先要明确： 1、数字类型是一个int，有限定的位数，太大就失精了，因此，太长的数字用tel类型，短数字用Number。 2、输入框是给用户用的，可以限制用户输入，但是不能自动改用户已经输入的东西（一开始用正则做了个匹配小数点后几位的自动删除，用户体验不好） 遇到的问题： 1、使用Number的时候，会有上下箭头（不好看），并且滚轮可以滑动（正常页面就是滚轮滑的，不能一键多用），禁用这两个 2、输入（或复制黏贴进去）非数字的时候，虽然没输入，但是输入框中的光标闪动到左上角了，禁用这个 <style l
Element组件（inputNumber计数器）
weixin_68915174的博客
11-29 1877
按照指定间隔递增或递减。
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
element-ui.rar element-ui核心库压缩包
12-20
Element UI 包含了大量的 UI 组件，如表格、按钮、对话框、通知、下拉菜单、日期选择器、轮播图、进度条等，涵盖了网页开发中常见的功能需求。 在使用 Element UI 开发项目时，首先需要在项目中引入该库。这通常...
VUE.js+element-ui实现JSON编辑器
07-24
在这个"VUE.js+element-ui实现JSON编辑器"项目中，开发者利用Vue.js的响应式数据绑定和组件化特性，结合Element-UI的组件库，创建了一个可以在网页上编辑JSON数据的工具。JSON（JavaScript Object Notation）是一种...
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
详解element-ui动态限定的日期范围选择器代码片段
11-20
element-ui 的日期选择器的组件是 el-date-picker. 设定 pickerOptions2， data() { return { pickerOptions2: { disabledDate: theDate => { const oneDay = 3600 * 1000 * 24 const current = the
input number 输入正整数以及输入位数限制
u010729753的博客
10-22 1万+
input number 输入正整数 HTML页面中，input输入框当仅能输入数字，发现还会键入- + e E等各种字符。有时为了不让这些字符输入，切只能输入整数。 解决方案如下: ＜input id="mid" type="number" min="1" oninput="this.value=this.value.replace(/\D/g);"/＞ 为了保证输入位数，在oninput方法中加入如下: ＜input id="mid" type="number" min="1" oninput="thi
【element-ui】输入框组件el-input输入数字/输出Number类型：type=“number“、v-model.number用法
shawxlee的CSDN博客
02-07 4753
输入框组件el-input输入数字/输出Number类型
Element中的el-input-number+SpringBoot+mysql
karlaofsky的博客
01-22 788
【代码】Element中的el-input-number+SpringBoot+mysql。
elementUI input只能输入数字、小数的几种方法
weixin_42397937的博客
03-05 1万+
elementUI <input type="number">时候样式取消
关于el-input-number计数器change事件校验数据，改变绑定数据值后change方法失效问题的原因及解决方法
direction_0528的博客
03-28 2928
查阅资料后发现问题原因在 change事件发生后触发了dom更新，而数据更改变化是在dom更新之后，这就导致了dom当中挂载的数据值还是更新之前的值，并且此后无刷新控制dom重新渲染的指令，使得chhange方法失效。解决方法：用$nextTick函数对绑定值进行更改（ this.$nextTick(() => { this.绑定值= 更改值 }) ），即在dom初次完成渲染挂载后，修改其值再次触发dom渲染挂载。
element-ui：el-input输入数字-整数和小数
彭世瑜的博客
06-02 6179
需求是：发现网上大部分文章的处理方式：比对一下几种方案后，最终使用的是 实现 几种方式对比
Element input输入框 限制输入数据规则
crazybai0001的博客
11-09 1万+
本文实现在VUE+Element环境下使用文本框时，限制文本框中输入数据格式的限制，使用的是el-input组件，将其type设置为了number，在配合在oninput中设置接收数据规则，实现了具体需求。
element el-input-number 计数器只能输入整数
07-27
你可以通过设置 `el-input-number` 组件的 `step` 属性为整数来限制计数器只能输入整数值。例如，将 `step` 设置为 `1`，就可以确保只能输入整数值。下面是一个示例代码： ```html <el-input-number v-model="count" :step="1"></el-input-number> ``` 在这个示例中，`v-model` 绑定了一个名为 `count` 的变量，而 `:step="1"` 则设置了计数器的步长为 `1`，这样用户就只能输入整数值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人才程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值