这里主要是针对vis的network图进行节点动态添加
图用的是vis.js，表单使用的是element-ui
程序运行截图如下：
添加一个节点：
这里是不需要刷新页面就能添加的。
程序结构如下：
关键源码如下：
FormGroup.vue
<template><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="id" prop="pass"><el-input v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="结点名" prop="checkPass"><el-input v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="连接到节点ID" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></template><script>import {addNode} from 'JS/visTest.js'export default {data() {let checkAge = (rule, value, callback) => {};let validatePass = (rule, value, callback) => {};let validatePass2 = (rule, value, callback) => {};return {ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},methods: {submitForm(formName) {addNode(this.ruleForm['pass'], this.ruleForm['checkPass'], this.ruleForm['age']);},resetForm(formName) {this.$refs[formName].resetFields();}}}</script>
HelloWorld.vue
<template><div><div id="networkDemo" style="width:800px; height: 600px"></div><FormGroup></FormGroup></div></template><script>import {createNode} from 'JS/visTest.js'import FormGroup from './FormGroup'export default {name: 'HelloWorld',mounted(){this.init();},components:{FormGroup},data () {return {msg: 'Welcome to Your Vue.js App'}},methods: {init(){createNode('networkDemo')}}}</script><style scoped></style>
main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = falseVue.use(ElementUI)/* eslint-disable no-new */new Vue({el: '#app',router,components: {App},template: '<App/>'})
visTest.js
import vis from 'vis'let nodes;let edges;export function createNode(idStr) {nodes = new vis.DataSet([{id: 1, label: 'Node 1'},{id: 2, label: 'Node 2'},{id: 3, label: 'Node 3'},{id: 4, label: 'Node 4'},{id: 5, label: 'Node 5'},]);edges = new vis.DataSet([{from: 1, to: 3, label: 'Hello'},{from: 1, to: 2},{from: 2, to: 4},{from: 2, to: 5},{from: 3, to: 5}])let container = document.getElementById(idStr);let data = {nodes: nodes,edges: edges};let options = {};let network = new work(container, data, options);}export function addNode(id, label, toId){let newNode = {id: id, label: label};let line = {from: id, to: toId};console.log(newNode)nodes.add(newNode);edges.add(line);console.log("add Node over");}
