【 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自定义描述文案

# 觉得有用请点赞👍

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

互联网技术净土?原生鸿蒙开启全新技术征程

鸿蒙生态与开发者的崭新机会 HarmonyOS NEXT承载着华为对未来操作系统的深刻理解&#xff0c;如今已发展为坚实的数字底座。它不仅在技术层面取得了全面突破&#xff0c;还在中国操作系统市场中站稳了脚跟。 当前&#xff0c;HarmonyOS NEXT的代码行数已超过1.1亿&#xff0c…

从书本到代码:人工智能如何改变教育游戏规则?

内容概要 随着时代的发展&#xff0c;人工智能在教育领域展现出前所未有的潜力&#xff0c;成为推动教育改革的重要力量。它不仅仅是一种技术工具&#xff0c;更是一种变革的催化剂&#xff0c;促使传统教育模式必须进行自我反思和更新。通过利用智能算法&#xff0c;教育者可…

Kubernetes-编排工具篇-01-Kustomize与Helm对比

Kustomize与Helm对比 0、前言 K8s 是一个开源容器编排平台&#xff0c;可自动执行容器化应用程序的部署、扩展和管理。近年来&#xff0c;K8s 已成为采用云原生架构和容器化技术的组织的标准。 但是由于K8s的复杂性&#xff0c;所以很多公司以及开源组织都在开发相关的工具来…

【AIGC】如何通过ChatGPT轻松制作个性化GPTs应用

创建个性化的GPTs应用是一个涉及技术、设计和用户体验的过程。以下是详细步骤&#xff1a; ###1.确定应用目标和用户群体 在开始之前&#xff0c;你需要明确你的应用的目标和目标用户。这将帮助你在设计、开发和个性化方面做出相应的决策。例如&#xff0c;如果你的应用是为了…

141/142题环形链表

本题返回环入口的位置。使用快慢指针&#xff0c;快指针每次移动两个&#xff0c;慢指针每次移动一个。设前一段距离是a,进入环内到slow和fast相遇的地点距离是b&#xff0c;环内剩下的距离是c&#xff0c;如图所示。 环的长度是bc 慢指针移动距离是ab 快指针移动距离是abk(bc…

快速入门Zookeeper

Zookeeper ZooKeeper作为一个强大的开源分布式协调服务&#xff0c;扮演着分布式系统中至关重要的角色。它提供了一个中心化的服务&#xff0c;用于维护配置信息、命名、提供分布式同步以及提供组服务等。通过其高性能和可靠的特性&#xff0c;ZooKeeper能够确保在复杂的分布式…

SpringBoot环境下的共享汽车管理策略

3系统分析 3.1可行性分析 通过对本共享汽车管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本共享汽车管理系统采用SSM框架&#xff0c;JAVA作为开发语…

确定图像的熵和各向异性 Halcon entropy_gray 解析

1、图像的熵 1.1 介绍 图像熵&#xff08;image entropy&#xff09;是图像“繁忙”程度的估计值&#xff0c;它表示为图像灰度级集合的比特平均数&#xff0c;单位比特/像素&#xff0c;也描述了图像信源的平均信息量。熵指的是体系的混乱程度&#xff0c;对于图像而言&#…

什么是多因素身份验证(MFA)的安全性?

多因素身份验证(MFA)简介 什么是MFA 多因素身份验证(MFA)是一种安全过程&#xff0c;要求用户在授予对系统、应用程序或账户的访问权限之前提供两种或多种形式的验证。仅使用单个因素&#xff08;通常是用户名和密码&#xff09;保护资源会使它们容易受到泄露&#xff0c;添加…

特色3D打印机stm32迷你8轴双核心主板

我自己设计的3D打印机主板 1. 这是一块迷你的8轴主板, 主板尺寸为100mm*75mm, 使用一个8cm静音风扇散热足够了2. 这是一个带有保护的板子, 驱动上的gpio具有过压保护功能, 能够直接抗住24V的冲击, 意味着一个驱动炸了, 板子不烧, 并且其他的驱动也没事, 主板支持自动关机3. 8…

【LeetCode:3242. 设计相邻元素求和服务 + 模拟 + 哈希表】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

GIF图片格式详解(二)

gif历史请参考上一篇《GIF图片格式详解&#xff08;一&#xff09;》&#xff0c;或直接访问博客地址&#xff1a;https://blog.whatsroot.xyz/2023/12/16/all-about-gif/ 文件格式概述 GIF格式采用调色板模式&#xff0c;即有一个颜色表&#xff0c;每种颜色可以使用RGB24格…

TypeScript 基础语法及使用

文章目录 1、概述2、快速使用3、常用类型4、基础类型5、联合类型6、函数类型7、对象类型 & 接口interface 1、概述 TypeScript&#xff08;简称 TS&#xff09;是JavaScript的超集&#xff08;继承了JS全部语法&#xff09;是微软开发的开源编程语言&#xff0c;可以在任何…

深入了解决策树:机器学习中的经典算法

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

基于Java Web的传智播客crm企业管理系统的设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

如何学习C++游戏开发

学习C游戏开发是一个涉及多个领域的复杂过程&#xff0c;包括编程、游戏设计、图形学等。 1. **学习C基础**&#xff1a; - 掌握C的基本语法和面向对象编程。 - 学习C标准库&#xff0c;特别是STL&#xff08;标准模板库&#xff09;。 2. **理解游戏开发概念**&#xf…

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用(声明队列和交换机、发送接收消息、配置 JSON 消息转化器)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 RabbitMQ 初识 1.1 RabbitMQ 安装 2.0 数据隔离 2.1 用户管理 2.2 virtual host 虚拟主机 3.0 SpringAMQP 3.1 RabbitMQ 配置 3.2 发送消息 3.3 接收消息 3.4 Wor…

基础归一化方法 数学理论及其matlab代码

归一化是一种简化计算的方式&#xff0c;即将有量纲的表达式&#xff0c;经过变换&#xff0c;化为无量纲的表达式&#xff0c;成为标量。在多种计算中都经常用到这种方法。以下是常见的基础归一化方法&#xff1a;Min-Max 归一化&#xff0c;Z-Score 归一化、小数定标归一化、…

漫漫数学之旅038

文章目录 经典格言数学习题古今评注名人小传 - 古斯塔夫福楼拜 经典格言 诗歌是一门像几何一样严格的科学。——古斯塔夫福楼拜&#xff08;Gustave Flaubert&#xff09; 古斯塔夫福楼拜将诗歌比作几何学&#xff0c;强调了诗歌创作的严谨性。他认为诗歌不仅仅是情感的流露&a…

前端md5加密

npm下载 npm install --save ts-md5页面引入 import { Md5 } from ts-md5使用 const md5PwdMd5.hashStr("123456")md5Pwd&#xff08;加密后的数据&#xff09; .toUpperCase()方法转大写