Rudol 2022-04-19 22:35 采纳率: 100%
浏览 412
已结题

element-ui step步骤条的使用问题

自己学着做一个it备件库管理系统的维护模块,维护模块里我想对应每种it硬件都有对应的维护步骤,我在点开每一台设备进行维护的时候从后台返回对应的“维护项目“数组,我想通过步骤条的形式,对应每一条维护项目进行操作,如果其中有一条维护项目出现问题,将从此条步骤返回后台,反之步骤条全部进行完毕,将从最后一步骤条返回后台。 但是我在前端操作步骤条的时候,发现没办法操作每一条步骤条。

  </el-step>
</el-steps>
<el-button style="margin-top: 12px;" @click="next()">下一步</el-button>

data() {
item: [],
arr:[],
}
methods: {
next() {
if (this.active++ > 5)
{
this.active=0;
};
问题相关代码,请勿粘贴截图

运行结果及报错内容

img

我的解答思路和尝试过的方法

我的想法是把这个数据用v-for循环出来也就是图示的样子,但是我发现绑定不了每一条步骤。我一度想考虑换成复选框去实现了,但是我想试试这种方式能不能行。谢谢各位!

我在做这个步骤条的时候想要类似一些登录功能的样式,上方是对应的步骤,对每个步骤下方都能进行按钮操作。

  • 写回答

1条回答 默认 最新

  • 会飞的咕咕鱼 2022-04-19 22:49
    关注

    1.data应该是有return的一个函数
    data(){
    return {

    }
    2.在data中声明一下active,目前看你的active不是一个响应式数据,所以你改变this.active的值 进度条没有变化,steps上面也需要绑定active

    img

    <template>
      <div>
        <el-steps :active="active"  align-center finish-status="success">
          <el-step v-for="(item,key) in list" :key="key" :title="item.message"></el-step>
        </el-steps>
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            active: 0,
            list: [{
              message: "外观检测"
            },{
              message: "电池效率检测"
            },{
              message: "系统功能检测"
            },{
              message: "硬盘检测"
            },{
              message: "通电测试"
            },{
              message: "信号测试"
            }],
          };
        },
        methods: {
          next() {
            if (this.active++ > 5) this.active = 0;
          }
        }
      }
    </script>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 7月4日
  • 已采纳回答 6月26日
  • 创建了问题 4月19日

悬赏问题

  • ¥15 Python题,回答一下下啦
  • ¥15 会会信号与系统和python的来
  • ¥15 关于#python#的问题
  • ¥20 oracle RAC 怎么配置啊,配置
  • ¥15 excel 日常使用中出现问题
  • ¥20 pdusession建立失败
  • ¥15 为什么mqtt接收不到数据?
  • ¥15 思科校园网的组建,sos!
  • ¥15 主要进行描述非满管状态下,管路的摩阻系数是怎么变化的,在管路长度方向上是怎么分布的(标签-matlab)
  • ¥15 multisim设计求解如图