vue element组件之步骤条组件的应用

心已赠人 2022-02-02 10:57 901阅读 0赞

### ***效果如下*** ###

![20190511132448918.gif][]

### ***代码如下*** ###

<template>
      <div class="body">
          <Head/>
        <div class="tbody">  
    <el-steps :active="active" finish-status="success">
      <el-step title="个人信息"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    
    <div class="info" v-if="active==1">
    我的信息
    </div>
    <div class="info" v-if="active==2">
    我的步骤
    </div>
    <div class="info" v-if="active==3">
    我的步骤222
    </div>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>  
    <el-button style="margin-top: 12px;" @click="pre" v-if="active>1">上一步</el-button>  
    </div>
          </div>
    </template>
    <style>
    .tbody{
        width:80%;
        margin-left:10%;
        margin-top: 2%;
    
    }
    </style>
    <script>
    import Head from "../../components/common/Head";
      export default {
          components: {
        Head
      },
        data() {
          return {
            active: 1
          };
        },
    
        methods: {
          next() {
            if (this.active++ > 3) this.active = 1;
          },
           pre() {
            if (this.active-- < 2) this.active = 1;
          }
        }
      }
    </script>

[20190511132448918.gif]: /images/20220202/e2852fa92979456b9e0bb9a6883fea52.png

发表评论取消回复

表情：

评论列表（有 0 条评论，901人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue基础】element组件

一、需求描述有按钮、表格、页码、嵌套的表格，选择页码或每页记录数时会出现监听效果，点击嵌套的表格会弹出表格内容。二、代码分享 ElementView.vue文件中代码

谁借莪１个温暖的怀抱￠/ 2023年10月11日 21:38/ 0 赞/ 44 阅读

相关 Vue + element-ui 【前端项目一】Vue 组件中引入组件 6

阅读目录效果预览首页组件中引入获取更多组件完整源码 E:\\pdf1\\cg\\src\\components\\Mov

墨蓝/ 2023年10月07日 20:16/ 0 赞/ 42 阅读

相关 vue结合Element UI如何实现Steps步骤条组件和Tabs标签页组件联动

一、Element UI中Steps和Tabs组件联动 1. 引入`Steps`步骤条组件，`space`属性是每个`step` 的间距，不填写将自适应间距，支持百分比

深碍√TFBOYSˉ_/ 2023年07月06日 13:28/ 0 赞/ 31 阅读

相关 VUE-Element组件（四）tree

一、点击tree，获取点击的item： <template> <div class="container"> <el-card>

深藏阁楼爱情的钟/ 2023年05月21日 07:23/ 0 赞/ 35 阅读

相关【Vue.js】Vue.js组件库Element中的下拉菜单、步骤条、对话框和文字提示

1、Dropdown 下拉菜单将动作或菜单折叠到下拉菜单中。基础用法移动到下拉菜单上，展开更多操作。 ![20200903152709271.png_p

不念不忘少年蓝@/ 2022年12月03日 12:55/ 0 赞/ 1336 阅读

相关 Element-ui之ElScrollBar组件滚动条的使用方法

在翻看 element-ui官网的文档时,发现el-scrollbar不会写在文档中。通过阅读源码，scrollbar组件暴露了 native, wrapStyle, wr

一时失言乱红尘/ 2022年11月06日 14:58/ 0 赞/ 569 阅读

相关 vue element组件实现步骤条形式的复杂表单信息的注册

我的qq 2038373094 实际效果如下 ![20190511181859323.gif][] vue代码如下 <template>

灰太狼/ 2022年02月02日 12:41/ 0 赞/ 484 阅读

相关 vue element组件之步骤条组件的应用

效果如下 ![20190511132448918.gif][] 代码如下 <template> <div class="body">

心已赠人/ 2022年02月02日 10:57/ 0 赞/ 902 阅读

相关 element ui 使用步骤条组件实现时间列表组件

element ui 中的步骤条组件——steps 最近在写几个小组件，嗯，组件的编写比搭建页面和渲染数据要难一些，难就难在思想，这个东西看不见摸不着，得练习，得思考。

小咪咪/ 2021年08月29日 19:50/ 0 赞/ 1529 阅读

相关 uniapp组件-uni-steps 步骤条

效果图： ![20210303213353631.gif][] 代码实现： <template> <view> <uni-steps

柔情只为你懂/ 2021年07月26日 00:26/ 0 赞/ 2835 阅读