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

最新推荐文章于 2025-07-11 09:18:31 发布

LvyYoung

最新推荐文章于 2025-07-11 09:18:31 发布

阅读量1.3w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/yang_da_da/article/details/80107941

vue.js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用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>

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