主要还是用了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>怎么把分支步骤条加入进主步骤条是个问题
