vue制作动态树节点结构布局代码-站长技术网

vue制作动态树节点结构布局代码

时间:2019-11-15 10:34:49 来源:网络收集作者:不详点击:次

源码授权：免费特效运行环境： JS 源码大小： 79 KB
普通会员
点击下载

一款创意的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>