vue.js树形组件之删除双击增加分支实例代码
发布时间：2020-12-17 03:03:36 所属栏目：百科 来源：网络整理
导读：html代码： 这里使用x-template全局属性，页面加载不显示，但是可供js使用 js代码： 以上所述是小编给大家介绍的vue.js树形组件之删除双击增加分支实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢
html代码：这里使用x-template全局属性，页面加载不显示，但是可供js使用 js代码：
//加载树形结构初始数据，可用ajax获取
var data = {
name: 'My Tree',children: [
{ name: '一级' },{ name: '一级' },{
name: '一级有子菜单',children: [{
name: '二级有子菜单',children: [
{ name: '三级' },{ name: '三级' }
]
},{ name: '二级' },{ name: '二级' }
]
}
]
}
Vue.component（'item',{//获取全局组件（可用于注册组件）
template: '#item-template',props: {
model: Object//定义model数据格式
},data: function（） {
return {
open: false//vue对样式改变操作，true显示 false不显示
}
},computed: {//读取写入函数，不写get,set则为只读
isFolder: function（） {
return this.model.children
}
},methods: {
toggle: function（） {
if（this.isFolder） {
this.open = !this.open//打开树形结构
}
}
}
}）
以上所述是小编给大家介绍的vue.js树形组件之删除双击增加分支实例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |