使用iView的步骤条实现简易流程图

本文介绍了一个使用VUE实现的流程图自定义示例,通过v-model双向绑定和自定义组件实现流程状态更新。文章展示了如何通过表格操作按钮触发流程状态变化,并提供了流程图组件的具体代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要还是用了v-model双向绑定的概念和render函数,遗憾的是自己不怎么会改step的样式和结构,所以不能自定义流程图的样子,以后再完善吧。效果是这样滴:


主要的代码部分:

<Table>是图1的表格,<common-dialog>定义了一个对话框,<flow-chart>定义了对话框的内容,也就是流程图啦

    <Table width="700" border :columns="columns1" :data="data1" :row-class-name="rowClassName"></Table>
    <common-dialog
      :width="800"
      :height="400"
      :visible="visible"
      :title="title"
      @on-cancel="queryFormCancel">
      <div slot="content">
        <flow-chart :visible="visible" :data1="data1">
        </flow-chart>
      </div>
    </common-dialog>


下面是表格中操作按钮的代码,相对应的还有一个不同意,但怎么把他们放进一个单元格里呢

{
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 80,
            that: this.data1,
            render: (h,params) =>{
            if(params.row.status == 'process')
      {
        {
          return h('Button', {
            props: {
              type: 'text',
              size: 'small'
            },
//              'class': 'buttonStyle',
            on: {
              click: () => {
              this.ok(params.index)
          }
        }
        },
          '同意')
        }
      }
      return ''
    }
    },

ok事件可以修改步骤的状态

ok(index){
        this.data1[index].title = '已完成';
        this.data1[index].status = 'finish';
        if(index < this.data1.length){
          this.data1[index + 1].title = '进行中';
          this.data1[index + 1].status = 'process';
        }
      },

相应的flow-chart组件中的内容如下,主要通过v-model来双向绑定

<template>
  <div v-show="visible">
    <my-steps :current="3">
      <my-step :title="data1[0].title" :content="data1[0].detail" :status="data1[0].status"></my-step>
      <my-step :title="data1[1].title" :content="data1[1].detail" :status="data1[1].status"></my-step>
      <my-step :title="data1[2].title" :content="data1[2].detail" :status="data1[2].status"></my-step>
      <my-step :title="data1[4].title" :content="data1[4].detail" :status="data1[4].status"></my-step>
    </my-steps>
    <div class="space">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
    <div class="step2">
      <div class= "step-tail"><i></i></div>
      <my-steps class="mystep2">
        <my-step :title="data1[3].title" :content="data1[3].detail" :status="data1[3].status"></my-step>
      </my-steps>
      <div class="step-tail2"><i></i></div>
    </div>
  </div>
</template>

怎么把分支步骤条加入进主步骤条是个问题

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值