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

觉得有用请点赞👍

相关推荐
第七种黄昏4 分钟前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq5 分钟前
前端box-shadow出现兼容性问题如何处理
前端
携欢13 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河21 分钟前
工作中的Ai工具汇总
前端
mapbar_front39 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕1 小时前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu1 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼1 小时前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js