发展历程 网站建设,vue做的网站模板,wordpress做登录界面,wordpress自建全屏页面本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。
效果图#xff1a; 基础用法
简单的步骤条。
设置 active 属性#xff0c;接受一个 Number#xff0c;表明步骤的 index#xff0c;从 0 开始。 需要定宽的步骤条时#xff0c;设置 space 属性即…本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。
效果图 基础用法
简单的步骤条。
设置 active 属性接受一个 Number表明步骤的 index从 0 开始。 需要定宽的步骤条时设置 space 属性即可它接受 Number 单位为 px 如果不设置则为自适应。 设置 finish-status 属性可以改变已经完成的步骤的状态。 el-steps :activeactiveStep finish-statussuccess align-centerel-stepv-for(step, index) in steps:keyindex:titlestep.title/el-step/el-steps 循环显示
const steps [{ title: 创建凭证 },{ title: 选择物料 },{ title: 领料单位 },{ title: 领料人签名 },
]; Steps 属性
属性名说明类型默认space每个 step 的间距不填写将自适应间距。 支持百分比。number / stringdirection显示方向enumhorizontalactive设置当前激活步骤number0process-status设置当前步骤的状态enumprocessfinish-status设置结束步骤的状态enumfinishalign-center进行居中对齐boolean—simple是否应用简洁风格boolean— Step 属性
属性名说明类型默认title标题stringdescription描述文案stringiconStep 组件的自定义图标。 也支持 slot 方式写入string / Component—status设置当前步骤的状态 不设置则根据 steps 确定状态enum
Step 插槽
插槽名说明icon自定义图标title自定义标题description自定义描述文案 # 觉得有用请点赞
