<template>
<el-button type="primary"
@click="$refs.flow.addNode('测试节点')">添加节点</el-button>
<el-button type="primary"
@click="handleNext">下一个节点</el-button>
<br /><br />
<avue-flow :height="600"
:width="1200"
ref="flow"
:option="option"
v-model="form">
<template #header="{node}">
<i class="el-icon-delete"
@click="$refs.flow.deleteNode(node.id)"></i>
自定义头部
</template>
<template #="{node}">
<span>自定义{{(node || {}).name}}</span>
</template>
</avue-flow>
</template>
<script>
export default {
data () {
return {
count: 0,
form: '',
option: {
"name": "流程A",
"nodeList": [
{
"id": "nodeA",
"name": "流程A-节点A",
"left": 39,
"top": 110,
},
{
"id": "nodeB",
"name": "流程A-节点B",
"left": 340,
"top": 161,
},
{
"id": "nodeC",
"name": "流程A-节点C",
"left": 739,
"top": 161,
},
{
"id": "nodeD",
"name": "节点D",
"left": 739,
"top": 20,
}
],
"lineList": [
{
"from": "nodeA",
"to": "nodeB"
},
{
"from": "nodeB",
"to": "nodeC"
},
{
"from": "nodeC",
"to": "nodeD"
}
]
}
}
},
computed: {
nodeList () {
return this.option.nodeList
}
},
mounted () {
this.form = this.nodeList[this.count].id;
},
methods: {
handleClick (node) {
this.$message.success(JSON.stringify(node))
},
handleNext () {
this.count++
if (this.count >= this.nodeList.length) {
this.count = 0;
}
this.form = this.nodeList[this.count].id;
}
}
}
</script>
