一款创意的vue制作动态树节点结构布局代码,可创建多个节点子栏目或主菜单。
js代码
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
obj: [{
id: 1,
selected: 0,
arr: [1, 2]
},
{
id: 2,
selected: 2,
arr: [1, 2, 3]
},
{
id: 3,
selected: 1,
arr: [1]
},
{
id: 4,
selected: -1,
arr: []
}
]
},
methods: {
//加一列
addModel() {
var l = this.obj.length
if (l > 7) {
alert('再加,自动换行会变形的!!!!!!!')
} else {
var nullModel = {
id: l + 1,
selected: -1,
arr: []
}
this.obj.push(nullModel)
}
},
//加一行
addBox(k) {
var num = this.obj[k].arr.length + 1;
this.obj[k].arr.push(num)
},
//选中当前列中的数据
selectFun(k, index) {
this.obj[k].selected = index;
}
}
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791