1 打开一个vue文件,添加一个Steps步骤条组件。如图 2 在el-steps 标签上添加direction="vertical",用于设置步骤条竖向显示。如图 3 保存vue文件后使用浏览器打开,这时候就可以看到步骤条竖向显示了。如图
Element UI version 2.0.2 OS/Browsers version Windows10 / Chrome Vue version 2.5.2 Reproduction Link https://jsfiddle.net/hzfpyvg6/72/ Steps to reproduce 代码如下: <el-steps direction="vertical" :active="1"> <el-step title="步骤 1"></el-step> <...
<template> <el-steps direction="vertical"> <el-step :title="item" v-for="(item, index) in titleList" :key="item" :status="active == index ? 'finish' : 'wait'" ></el-step> </el-steps> </template> export default { props: { titleList: { type: Array, default: [] ...
<el-steps :active="active"finish-status="success"direction="vertical"> <el-step :title="item.label"v-for="item in approvalProcessProject":id="item.id"> </el-step> </el-steps> <el-button style="margin-top: 12px;"@click="next">下一步</el-button> 申请人 圆领 提交了割接...
2 接着,在template标签中,插入步骤条el-steps,并插入多个节点 3 再在步骤条下方,插入一个按钮,用于改变步骤条节点,定义点击事件 4 在项目的主文件中,导入Steps组件,然后在界面中引入 5 保存代码并使用命令运行项目,打开浏览器,查看步骤条显示效果 6 在步骤条el-steps中,添加direction,属性设置为vertical...
<el-steps direction="vertical" :active="number"> <el-step title="步骤1"></el-step> <el-step title="步骤2"></el-step> <el-step title="步骤3" description="步骤完成"></el-step> </el-steps> <el-button type="success" @click="addStep()">增加步骤</el-button> <el-button ...
<el-steps direction="vertical" :align-center="true" :active="arr.length" finish-status="success"> <el-step :title="item.title" :description="item.description" v-for="(item, index) in arr" :key="index" @click.native="onCLick(index)"> <template slot="description"> <!--表单内容--...
direction,步骤的方向。此参数确定步骤是水平排列还是垂直排列。它接受值`horizontal`和`vertical`。默认值为`horizontal`。 finishStatus,控制已完成步骤的状态。此参数确定已完成的步骤如何显示。它接受值`error`、`success`和`finish`。默认值为`finish`。 space,控制步骤之间的间距。此参数允许您调整步骤之间的间距以...
<el-steps direction="vertical":active="number"><el-step title="步骤 1"></el-step><el-step title="步骤 2"></el-step><el-step title="步骤 3"description="步骤完成"></el-step></el-steps><el-button type="success"@click="addStep()">增加步骤</el-button><el-button type="danger...