Vue--递归组件--树形

最新推荐文章于 2024-09-27 09:19:35 发布

ziyanShao

最新推荐文章于 2024-09-27 09:19:35 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue 树形组件递归组件

本文链接：https://blog.csdn.net/lynnshao/article/details/85099781

版权

这篇博客介绍了如何在Vue中自定义递归组件来创建树形结构，并分享了在实现过程中遇到的两个问题：点击冲突和输入框自动获取焦点。针对点击冲突，提出了使用setTimeout和clearTimeout的方法来解决；对于输入框聚焦，提到了Vue的生命周期钩子函数，如bind、inserted、update、componentUpdated和unbind，并指出它们在组件不同阶段的调用情况。

摘要由CSDN通过智能技术生成

使用vue自定义了一个递归组件。
效果：
树形组件效果图
不多说，直接上代码。
纯列表展示（icon样式使用的bootstrap的glyphicon）：

new Vue({

})
Vue.component('tree-list', {
    template: `
        <ul class="tree-list">
            <li v-for="(item, index) in list">
                <div @click="toggle(item, index)">
                    <i :class="['icon', 'glyphicon', getIcon(item, index)]"></i>
                    <span>{
  { item.name }}</span>
                </div>
                <tree-list v-if="scope[index]" :list="item.children"></tree-list>
            </li>
        </ul>
    `,
    props: {
        list:  Array
    },
    data () {
        return {
            scope: {}