【 ElementUI 组件Steps 步骤条使用新手详细教程】
本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。
效果图:

基础用法
简单的步骤条。
设置 active 属性,接受一个 Number,表明步骤的 index,从 0 开始。 需要定宽的步骤条时,设置 space 属性即可,它接受 Number, 单位为 px, 如果不设置,则为自适应。 设置 finish-status 属性可以改变已经完成的步骤的状态。
<el-steps :active="activeStep" finish-status="success" align-center><el-stepv-for="(step, index) in steps":key="index":title="step.title"></el-step></el-steps>

循环显示
const steps = [{ title: "创建凭证" },{ title: "选择物料" },{ title: "领料单位" },{ title: "领料人签名" },
];

Steps 属性
| 属性名 | 说明 | 类型 | 默认 |
|---|---|---|---|
| space | 每个 step 的间距,不填写将自适应间距。 支持百分比。 | number / string | '' |
| direction | 显示方向 | enum | horizontal |
| active | 设置当前激活步骤 | number | 0 |
| process-status | 设置当前步骤的状态 | enum | process |
| finish-status | 设置结束步骤的状态 | enum | finish |
| align-center | 进行居中对齐 | boolean | — |
| simple | 是否应用简洁风格 | boolean | — |
Step 属性
| 属性名 | 说明 | 类型 | 默认 |
|---|---|---|---|
| title | 标题 | string | '' |
| description | 描述文案 | string | '' |
| icon | Step 组件的自定义图标。 也支持 slot 方式写入 | string / Component | — |
| status | 设置当前步骤的状态, 不设置则根据 steps 确定状态 | enum | '' |
Step 插槽
| 插槽名 | 说明 |
|---|---|
| icon | 自定义图标 |
| title | 自定义标题 |
| description | 自定义描述文案 |
# 觉得有用请点赞👍
相关文章:
【 ElementUI 组件Steps 步骤条使用新手详细教程】
本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。 效果图: 基础用法 简单的步骤条。 设置 active 属性,接受一个 Number,表明步骤的 index,从 0 开始。 需要定宽的步骤条时,设置 space 属性即…...
MQTT从入门到精通之 MQTT 客户端编程
MQTT 客户端编程 1 在VUE中使用MQTT 具体步骤如下所示: 1、初始化vue项目 // 创建一个使用vite构建的前端项目 npm create vitelatest// 进入到项目中,执行如下命令安装项目依赖 npm install 2、安装element plus // 安装element plus npm install …...
数据结构-集合
一.集合的表示 一个重要的操作是查某个元素属于哪个集合,另一个操作是合并操作 从这个树的节点去找树根也就是从下往上找,要把树并起来只需把两个根并在一起就可以了 不存在已知一个节点去找孩子节点,根重要的是已知一个节点找它的父亲节点,与之前的二…...
前端 JS面向对象 原型 prototype
目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题: function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…...
Java中的不可变集合:性能与安全并重的最佳实践
Java中的不可变集合:性能与安全并重的最佳实践 在现代软件开发中,集合类(如List、Set和Map)是Java开发者的日常工具。它们用于存储和操作数据,能极大地简化开发工作。但随着并发编程和大规模应用的广泛使用࿰…...
RandomWords随机生成单词
from random_words import RandomWords rw RandomWords() r rw.random_word() print(r) 更多How to use — random_words documentation (randomwords.readthedocs.io) li LoremIpsum()# 这行代码创建了一个 LoremIpsum 类的实例。li.get_sentence()# 这个方法返回一个随机…...
从零开始使用Intel的AIPC使用xpu加速comfyui
Intel的AIPC使用xpu加速跑comfyui 环境安装python环境搭建驱动及oneAPI安装创建python环境验证环境是否生效 ComfyUI的安装下载、汉化comfyui下载checkpoint 测试使用xpu加速测试使用cpu执行测试 环境安装 python环境搭建 直接下载Anaconda 下载地址 安装好后,通…...
PyQt入门指南五十二 版本控制与协作开发
在开发PyQt应用程序时,版本控制和协作开发是提高开发效率和项目可维护性的重要手段。本指南将介绍如何使用Git进行版本控制,以及如何使用GitHub进行协作开发。 版本控制基础 Git简介:Git是一种分布式版本控制系统,用于跟踪代码变…...
思考:linux Vi Vim 编辑器的简明原理,与快速用法之《 7 字真言 》@ “鱼爱返 说 温泉啊“ (**)
Linux vi/vim | 菜鸟教程 https://zhuanlan.zhihu.com/p/602675406 Linux Vim编辑器的基本使用_vim文本编辑器-CSDN博客 这里提出使用 vi / vim 进行简单的编辑操作的原因,主要是在容器镜像中,普遍都是使用这个。 在 linux 服务器应用场景&#x…...
共筑开源技术新篇章 | 2024 CCF中国开源大会盛大开幕
在这个技术革新日新月异的时代,开源精神如同点燃创新火焰的火种,照亮了无数技术探索者的征途。2024年11月9日,备受瞩目的2024 CCF中国开源大会在深圳这座充满活力的创新之城盛大开幕。这场开源领域的顶级盛事,以“湾区聚力 开源启…...
SpringBoot(十八)SpringBoot集成Minio
项目上传文件集成一下Minio,下面是我在项目中集成Minio的全过程。 首先介绍一下Minio:MinIO是高性能的对象存储,单个对象最大可达5TB。适合存储图片、视频、文档、备份数据、安装包等一系列文件。是一款主要采用Golang语言实现发开的高性能、分布式的对象存储系统。客户端支…...
ODOO学习笔记(3):Odoo和Django的区别是什么?
Odoo和Django都是基于Python的开源框架,但它们的设计目标和用途有所不同: 设计目标和用途: Odoo:Odoo是一个企业资源规划(ERP)系统,它提供了一套完整的商业管理软件,包括会计、库存…...
持续收集解决VCcode各种报错的方法
在学习中我们经常会发生各种各样的报错, 1、pip 安装失败的报错 类似下面的 我们有时候纠结在上面会纠结好久,浪费很多时间。(什么轮子我不知道) 常见的解决方法: s-1:先uninstall packing,再重新装一次(有时候会重…...
Windows下使用adb实现在模拟器中ping
文章目录 前言安装adb执行adb命令查找模拟器设备链接模拟器命令行执行ping命令 总结 前言 有时在模拟器中测试应用不像在Windows这种开发环境中那么方便,毕竟Windows或者Linux下的工具五花八门,可以满足各种测试需求,比如应用在模拟器中无法…...
c++之deque和priority_queue
Deque 文档:https://legacy.cplusplus.com/reference/deque/deque/?kwdeque 相关接口: push_back():在尾部插入 #include <iostream> #include <deque>int main () {std::deque<int> mydeque;int myint;std::cout << "…...
SDL渲染器和纹理
文章目录 渲染器 (SDL_Renderer)纹理 (SDL_Texture)代码 渲染器 (SDL_Renderer) :它是渲染内容的接口,负责将内容绘制到窗口中。通过SDL_CreateRenderer创建,可以设置渲染器的背景颜色、绘图颜色、透明度等。所有绘图操作(如绘制…...
基于Matlab 火焰识别技术
课题介绍 森林承担着为人类提供氧气以及回收二氧化碳等废弃气体的作用,森林保护显得尤其重要。但是每年由于火灾引起的事故不计其数,造成重大的损失。如果有一款监测软件,从硬件处获得的图像中监测是否有火焰,从而报警࿰…...
Qt 监控USB设备的插入和移除
Qt 监控USB设备的插入和移除 flyfish Ubuntu22.04 Qt 6.2.4 CMakeLists.txt 内容 # 指定 CMake 的最低版本要求 cmake_minimum_required(VERSION 3.16)# 定义项目的名称和使用的编程语言 project(USBMonitor LANGUAGES CXX)# 开启自动 UIC,MOC 和 RCC 工具 set(…...
终于弄懂了Python自定义模块与代码复用
自定义模块与代码复用 在编写Python代码时,很多时候我们会遇到需要多次使用相同功能的情况。这时候,模块化编程就显得尤为重要。通过将常用的功能代码放入单独的模块中,我们可以轻松地进行代码复用,避免重复编写相同的代码&#…...
从无音响Windows 端到 有音响macOS 端实时音频传输播放
以下是从 Windows 端到 macOS 端传输音频的优化方案,基于上述链接中的思路进行调整: Windows 端操作 安装必要软件 安装 Python(确保版本兼容且已正确配置环境变量)。安装 PyAudio 库,可通过 pip install pyaudio 命令…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
Xcode 16 集成 cocoapods 报错
基于 Xcode 16 新建工程项目,集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...
