這里主要是針對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 vis.Network(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"); }

?

?

?

?

總結

以上是生活随笔為你收集整理的Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。