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