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

本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。

效果图:

基础用法

简单的步骤条。

设置 active 属性,接受一个 Number,表明步骤的 index,从 0 开始。 需要定宽的步骤条时,设置 space 属性即可,它接受 Number, 单位为 px, 如果不设置,则为自适应。 设置 finish-status 属性可以改变已经完成的步骤的状态。

复制代码
  <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step
          v-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 自定义描述文案

觉得有用请点赞👍

相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
前端君5 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6146 小时前
Web前端面试题(2)
前端
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite