本文实例为大家分享了某视频剪辑软件实现节点增删改功能的具体代码，供大家参考，具体内容如下

效果：

增删改功能tree.vue组件代码：

模板div class=' all-div ' v-if='模型。name ' div class=' item row ' : style=' { margin left : model。级别* 20 ' px ' } ' span v-show='模型。孩子们。length ' @ click=' expandOrCollapse ' img v-if=' model。isopen ' src=' http:/./assets/img/log in _ logo。png ' img v-else src=' http :/./assets/img/log in _ logo 2。png/span div class=' hover-div ' @鼠标悬停=' flag=true ' @鼠标移出=' flag=false ' span @ click=' jump(model。URL)' { { model。name } }/span v-show=' flag=' true ' @ click=' add ' style=' font size :40 px；color : red/span span v-show=' flag==true ' @ click=' remove(model)' img src=' http :/./assets/img/del。png/span v-show=' flag==true ' @ click=' edit ' style=' color : green；'修改/span！-span class=' asce ' v-show=' model。孩子们。length “@ click=”order asce”。孩子们。length‘@ click=‘订购desc’/span-/div/div导航v-if='模型。iso pen“v-for=”模型。儿童' :键='行。name ' : model=' row ' 33: length=' model。儿童.使用`编辑树`组件需要传递的数据道具： {//编辑树对象model: { type: Object }，length: { type: Number } }，data () { return { flag:false } }，methods: { //添加节点add(){ let val=prompt('请输入要添加的节点的名称：');如果(瓦尔){这个。模特。孩子们。push({ name : val，level: this.model.level 1，isOpen: true，children :[]})；} }, //移除节点remove(model){ var self=this；警报('确认删除吗？');如果（自我$parent.model) { self .$家长。模特。孩子们。foreach((项，索引)={ if(项。name==model。姓名){自我.$parent.model.children.splice(索引，1);} }) } }, //编辑节点名称edit(){ var self=this；让重命名=提示('请输入修改后的节点名称：');//使用正则进行重命名的差错校验if(！rename.length) { alert('请输入正确的节点名称');返回；}自我。模特。name=重命名；}, /** * 展开/收起功能*/expandOrCollapse(){ this。模特。isopen=！这个。模特。isopen},跳转(URL){ var self=this；自我$路由器。推送({路径： URL })}/*//升序排列ordasce(){ function compare(property){ return function(a，b){ var value 1=a[property]；var值2=b[属性]；返回值1 -值2;} }这个。模特。孩子们。排序(比较(' name '))；}, //降序排列订购desc(){这个。order asce()；这个。模特。孩子们。反向()；}*/},}/脚本！-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-仅样式作用域all-div { margin-left : 6%；} .项目行{ text-align : left填充-前：名2%；填充-底部： 2%;} .项目行范围.itemRow img{ cursor:指针；} .项目行跨度{ font-size : 1.1大众；} .hover-div { display : inline-block；}/样式父组件中引用代码：

模板div id=' all '树：模型=' root ' :长度=' length '/树/div/模板样式作用域为# all { width :100%；高度： 100%;} /stylescript从""导入树/tree.vue "导出默认{ data(){ return { root : { name : } "根节点，level:0，isOpen:true，children:[ { name: '节点1 '，级别：1，URL : '/主页/中间/左首'，isOpen:false，children:[ { name: '节点1-1 ',级别：2，isOpen:true，children:[] }，{ name: '节点1-2 ',级别：2，isOpen:true，children:[] } ] }，{ name: '节点2 '，级别：1，URL : '/主页/中间/左下一秒'，isOpen:false，children 3360[{ name : '节点2-1 ',级别：2，isOpen:true，children:[] }，{ name: '节点2-2 '，level:2，isOpen:true，children:[] } ] } ] })，length:2 } }，components 3360 { tree } }/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。