您的当前位置:首页vue2树形简易控件

vue2树形简易控件

2024-12-14 来源:哗拓教育

虽然官网给了树形控件怎么写,我相信大家也不一定能看懂,我想说树形控件的基本是需要递归相同的组件 而反复调用组件只需要组件的name值一样便可反复调用,闲话不说现在贴代码。

<template>

<gs :list="listdata" ></gs>

</template>

<script>

export default {

    data(){

      return{listdata:[{name:1,id:1,child:[{name:3,id:3,child:[]}]},{name:2,id:2,child:[]}]}

     },

    components:{

            gs:{

            name:gs,

            temlate:`<ul style="padding-left:1em">

                                <li v-for="li in list">{li.name}

                                <gs :list="li.child" ></gs>

                           </ul>`,

             props:['list']

              }

    }

}

以上基本的树形结构就出来了 因为都是组件组合组件的方式如果进行树形操作的话最好是用vuex来对节点进行记录并操作如果进行异步加载子节点数据的话也是可以进行的。

显示全文