当前位置: 首页 > news >正文

【 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显示方向enumhorizontal
active设置当前激活步骤number0
process-status设置当前步骤的状态enumprocess
finish-status设置结束步骤的状态enumfinish
align-center进行居中对齐boolean
simple是否应用简洁风格boolean

Step 属性​

属性名说明类型默认
title标题string''
description描述文案string''
iconStep 组件的自定义图标。 也支持 slot 方式写入string / Component
status设置当前步骤的状态, 不设置则根据 steps 确定状态enum''

Step 插槽​

插槽名说明
icon自定义图标
title自定义标题
description自定义描述文案

# 觉得有用请点赞👍

相关文章:

【 ElementUI 组件Steps 步骤条使用新手详细教程】

本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。 效果图&#xff1a; 基础用法​ 简单的步骤条。 设置 active 属性&#xff0c;接受一个 Number&#xff0c;表明步骤的 index&#xff0c;从 0 开始。 需要定宽的步骤条时&#xff0c;设置 space 属性即…...

MQTT从入门到精通之 MQTT 客户端编程

MQTT 客户端编程 1 在VUE中使用MQTT 具体步骤如下所示&#xff1a; 1、初始化vue项目 // 创建一个使用vite构建的前端项目 npm create vitelatest// 进入到项目中&#xff0c;执行如下命令安装项目依赖 npm install 2、安装element plus // 安装element plus npm install …...

数据结构-集合

一.集合的表示 一个重要的操作是查某个元素属于哪个集合&#xff0c;另一个操作是合并操作 从这个树的节点去找树根也就是从下往上找,要把树并起来只需把两个根并在一起就可以了 不存在已知一个节点去找孩子节点&#xff0c;根重要的是已知一个节点找它的父亲节点,与之前的二…...

前端 JS面向对象 原型 prototype

目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题&#xff1a; function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…...

Java中的不可变集合:性能与安全并重的最佳实践

Java中的不可变集合&#xff1a;性能与安全并重的最佳实践 在现代软件开发中&#xff0c;集合类&#xff08;如List、Set和Map&#xff09;是Java开发者的日常工具。它们用于存储和操作数据&#xff0c;能极大地简化开发工作。但随着并发编程和大规模应用的广泛使用&#xff0…...

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 下载地址 安装好后&#xff0c;通…...

PyQt入门指南五十二 版本控制与协作开发

在开发PyQt应用程序时&#xff0c;版本控制和协作开发是提高开发效率和项目可维护性的重要手段。本指南将介绍如何使用Git进行版本控制&#xff0c;以及如何使用GitHub进行协作开发。 版本控制基础 Git简介&#xff1a;Git是一种分布式版本控制系统&#xff0c;用于跟踪代码变…...

思考:linux Vi Vim 编辑器的简明原理,与快速用法之《 7 字真言 》@ “鱼爱返 说 温泉啊“ (**)

Linux vi/vim | 菜鸟教程 https://zhuanlan.zhihu.com/p/602675406 Linux Vim编辑器的基本使用_vim文本编辑器-CSDN博客 这里提出使用 vi / vim 进行简单的编辑操作的原因&#xff0c;主要是在容器镜像中&#xff0c;普遍都是使用这个。 在 linux 服务器应用场景&#x…...

共筑开源技术新篇章 | 2024 CCF中国开源大会盛大开幕

在这个技术革新日新月异的时代&#xff0c;开源精神如同点燃创新火焰的火种&#xff0c;照亮了无数技术探索者的征途。2024年11月9日&#xff0c;备受瞩目的2024 CCF中国开源大会在深圳这座充满活力的创新之城盛大开幕。这场开源领域的顶级盛事&#xff0c;以“湾区聚力 开源启…...

SpringBoot(十八)SpringBoot集成Minio

项目上传文件集成一下Minio,下面是我在项目中集成Minio的全过程。 首先介绍一下Minio:MinIO是高性能的对象存储,单个对象最大可达5TB。适合存储图片、视频、文档、备份数据、安装包等一系列文件。是一款主要采用Golang语言实现发开的高性能、分布式的对象存储系统。客户端支…...

ODOO学习笔记(3):Odoo和Django的区别是什么?

Odoo和Django都是基于Python的开源框架&#xff0c;但它们的设计目标和用途有所不同&#xff1a; 设计目标和用途&#xff1a; Odoo&#xff1a;Odoo是一个企业资源规划&#xff08;ERP&#xff09;系统&#xff0c;它提供了一套完整的商业管理软件&#xff0c;包括会计、库存…...

持续收集解决VCcode各种报错的方法

在学习中我们经常会发生各种各样的报错&#xff0c; 1、pip 安装失败的报错 类似下面的 我们有时候纠结在上面会纠结好久&#xff0c;浪费很多时间。&#xff08;什么轮子我不知道&#xff09; 常见的解决方法: s-1:先uninstall packing&#xff0c;再重新装一次(有时候会重…...

Windows下使用adb实现在模拟器中ping

文章目录 前言安装adb执行adb命令查找模拟器设备链接模拟器命令行执行ping命令 总结 前言 有时在模拟器中测试应用不像在Windows这种开发环境中那么方便&#xff0c;毕竟Windows或者Linux下的工具五花八门&#xff0c;可以满足各种测试需求&#xff0c;比如应用在模拟器中无法…...

c++之deque和priority_queue

Deque 文档&#xff1a;https://legacy.cplusplus.com/reference/deque/deque/?kwdeque 相关接口&#xff1a; push_back():在尾部插入 #include <iostream> #include <deque>int main () {std::deque<int> mydeque;int myint;std::cout << "…...

SDL渲染器和纹理

文章目录 渲染器 (SDL_Renderer)纹理 (SDL_Texture)代码 渲染器 (SDL_Renderer) &#xff1a;它是渲染内容的接口&#xff0c;负责将内容绘制到窗口中。通过SDL_CreateRenderer创建&#xff0c;可以设置渲染器的背景颜色、绘图颜色、透明度等。所有绘图操作&#xff08;如绘制…...

基于Matlab 火焰识别技术

课题介绍 森林承担着为人类提供氧气以及回收二氧化碳等废弃气体的作用&#xff0c;森林保护显得尤其重要。但是每年由于火灾引起的事故不计其数&#xff0c;造成重大的损失。如果有一款监测软件&#xff0c;从硬件处获得的图像中监测是否有火焰&#xff0c;从而报警&#xff0…...

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&#xff0c;MOC 和 RCC 工具 set(…...

终于弄懂了Python自定义模块与代码复用

自定义模块与代码复用 在编写Python代码时&#xff0c;很多时候我们会遇到需要多次使用相同功能的情况。这时候&#xff0c;模块化编程就显得尤为重要。通过将常用的功能代码放入单独的模块中&#xff0c;我们可以轻松地进行代码复用&#xff0c;避免重复编写相同的代码&#…...

从无音响Windows 端到 有音响macOS 端实时音频传输播放

以下是从 Windows 端到 macOS 端传输音频的优化方案&#xff0c;基于上述链接中的思路进行调整&#xff1a; Windows 端操作 安装必要软件 安装 Python&#xff08;确保版本兼容且已正确配置环境变量&#xff09;。安装 PyAudio 库&#xff0c;可通过 pip install pyaudio 命令…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...