一般数据类展示内容，大多采用树状结构展示内容。类似效果如下：
 
关注微信公众号，查看效果
 
 
左侧是导航分类，可以进行新建，对单项导航分享和删除。单击导航，在右侧查询出当前导航下所有目录结构，可以新建目录。新增类型分为三种，目录可以无限嵌套，当然也可以设置层级。
 
页面整体布局
 
页面分为左右两个部分。左侧列表，通过路由跳转显示右侧内容。左侧列表分为上下两块，顶部是添加按钮，下面是导航列表。
 
 
less样式。
 
import "../../theme/variables.less";
.main {    position: relative;    height: 100%;    overflow: hidden;    .content {        border: 1px solid #dcdcdc;        position: relative;        height: 100%;        background: #f1f2f7;        display: flex;        border-radius: @borderRadius;        .left {            width: 240px;            background: #fff;            border-right: 1px solid rgba(220, 220, 220, 1);            padding: 15px 10px;            display: flex;            flex-direction: column;            overflow: auto;            .header {                width: 100%;                margin-bottom: 20px;                display: flex;                justify-content: center;                align-items: center;                .btn {                    width: 136px;                    margin: 0 6px;                    :global {                        .icon {                            margin-right: 14px;                        }                        .customIcon {                            display: inline-block;                            transform: rotate(45deg);                        }                    }                }            }            .treeLayout {                flex: 1;                .item {                    width: 100%;                    height: 32px;                    line-height: 32px;                    margin-bottom: 11px;                    position: relative;                    .link {                        display: flex;                        align-items: center;                        font-size: 14px;                        font-family: Microsoft YaHei;                        font-weight: 400;                        color: rgba(51, 51, 51, 1);                        padding-left: 21px;                        cursor: pointer;                        .catalogIcon {                            font-size: 12px;                        }                        .text {                            display: inline-block;                            flex: 1;                            margin-left: 12px;                        }                        .opBtn {                            width: 46px;                            display: flex;                            align-items: center;                            justify-content: space-between;                        }                        .operateIcon {                            display: none;                        }                        &:hover {                            color: #00a4ff;                            .opBtn {                                color: rgba(51, 51, 51, 1);                            }                            .operateIcon {                                display: block;                            }                        }                    }                    .iconBtns {                        position: absolute;                        top: 28px;                        right: 24px;                        width: 112px;                        background: rgba(255, 255, 255, 1);                        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.13);                        border-radius: 4px;                        z-index: 10;                        .icon {                            width: 100%;                            height: 40px;                            border-radius: 2px;                            display: flex;                            align-items: center;                            justify-content: center;                            font-size: 12px;                            font-family: Microsoft YaHei;                            font-weight: 400;                            color: rgba(51, 51, 51, 1);                            cursor: pointer;                            .iconName {                                margin-left: 18px;                            }                            &:hover {                                background: #e7e8e9;                            }                        }                    }                }                .itemActive {                    .link {                        color: #00a4ff;                        .opBtn {                            color: rgba(51, 51, 51, 1);                        }                        .operateIcon {                            display: block;                        }                    }                }            }        }        .right {            flex: 1;            width: 100%;            overflow: hidden;        }    }}
 
这里的导航列表，新增导航，和删除都是调用相关接口。
 
目录树组件
 
页面右侧就是树状结构列表，通过路由跳转携带catalogId参数，接口查询出列表数据，后端返回的数据就是有层级的树状结构。
 
我认为的写一个组件，单指这里的目录树组件，组件中只需要构造出页面布局，任何的交互逻辑都不涉及，只将相关事件抛出即可。这就需要先明确好数据结构，来写样式布局了。
 
数据结构，有id，name，父级id，子节点数组，类型catalogType：1是目录，2是场景，3是外链场景 ... 如下：
 
 
树状结构会涉及到递归，这里为了处理方便，组件中分为两层。组件目录结构如下：
 
 
index就是对外暴露的窗口，主要目录树的布局样式是在DomNode中。先明确一下布局，目录树中单个一行，需要一个展开收起的图标，当前行类型的图标，这里业务上分三种类型，就需要以此判断显示不同图标。每项最后还会有四个操作按钮。
 
 
这里把事件简化了，只分了两个事件，一个是展开收起，一个是一系列编辑操作，传个type参数作为区分。
 
tabNode(node: ITree) {    this.$emit("tabNode", node);},
// 操作doNode(node: ITree, type: string, index: number) {    this.$emit("doNode", node, type, index);},
 
index文件中引用DomNode，相关的接收的参数和抛出去的事件，和DomNode一致。
 
// index布局<div class="treeLayout">    <DomNode        v-for="(item, index) in trees"        :key="index"        :node="item"        @tabNode="tabNode"        @doNode="doNode"        :index="index"    ></DomNode></div>
// 接收的参数props: {    trees: {        type: Array as () => ITree[],        default: [],    },    activeId: {        type: String,        default: "",    },},
 
页面右侧实现
 
引用catalogTree组件。
 
<catalog-tree  :trees="treeList"  @tabNode="tabNode"  @doNode="doNode"></catalog-tree>
 
前文已经提过，目录数据是后端返回的，那么treeList就是后端返回值res.data。但操作tabNode和doNode这两个方法，需要将treeList数组转换成map对象。
 
因为需要自定义添加一些字段，这些字段只作为前端交互操作逻辑使用，所以后端返回值中不会携带。
 
需要给每一项数据添加isOpen字段，用来判断展开收起状态。level字段，用来实现上移下移操作。
 
先来构造这个catalogMap，定义个方法setCatalogMap，需要的参数有存放结果的treeMap，原数据treeList数组。
 
setCatalogMap，很简单的一个递归。
 
 
拿到map对象，就可以实现tabNode和doNode这两个方法。
 
// 切换状态tabNode(node: ITree) {    if (node.isOpen) {        this.treeMap[node.catalogId].isOpen = false;    } else {        this.treeMap[node.catalogId].isOpen = true;    }},
// 编辑等一系列操作,按照类型区分doNode(node: ITree, type: string, index: number) {    switch (type) {        case "up":            // 上移            this.doUp(node, index);            break;        case "down":            // 下移            this.doDown(node, index);            break;        case "edit":            // 编辑            this.doEdit(node.catalogId);            break;        case "delete":            // 删除            this.doDelete(node);            break;    }},
 
有认真看的话，会发现，并没有在哪里定义isOpen属性，怎么就在tabNode方法中使用了。
 
因为我还没有写。
 
拿到map对象，循环做个判断，用来保持isOpen状态。
 
Object.keys(treeMap).forEach((key) => {    const item = treeMap[key];    if (this.treeMap[key]) {        item.isOpen = this.treeMap[key].isOpen;    } else {        item.isOpen = true;    }});
 
doNode中的四个方法，编辑和删除就是调个接口，主要是上移下移操作，前端实现数据的排序，最后将最新的数据返回给后端保存，doSaveSort方法调接口保存。
 
上代码，好好琢磨琢磨。
 
doUp(node: ICatalogModel, index: number) {    if (index === 0) {        return;    }    const parentId: string = node.catalogParent as string;    const parentItem: ICatalogModel = this.treeMap[parentId];
    let dataList: ICatalogModel[] = [];    // 如果为空则是顶级    if (parentItem) {        if (parentItem.catalogTreeVoList) {            dataList = parentItem.catalogTreeVoList;        }    } else {        dataList = this.treeList;    }    const item = dataList[index];    dataList.splice(index, 1);    dataList.splice(index - 1, 0, item);    this.doSaveSort(dataList);},
doDown(node: ICatalogModel, index: number) {    const parentId: string = node.catalogParent as string;    const parentItem: ICatalogModel = this.treeMap[parentId];    // 如果为空则是顶级    let dataList: ICatalogModel[] = [];    if (parentItem) {        if (parentItem.catalogTreeVoList) {            // 最后一个不能下移            if (parentItem.catalogTreeVoList.length === (index + 1)) {                return;            } else {                dataList = parentItem.catalogTreeVoList;            }        }    } else {        // 一级最后一个不能下移        if ( this.treeList.length === (index + 1)) {            return;        }        dataList = this.treeList;    }    const item = dataList[index];    dataList.splice(index, 1);    dataList.splice(index + 1, 0, item);    this.doSaveSort(dataList);},
 
总结
 
树状结构列表，首先需要明确数据结构，必备的字段id，name，父级id，children数组，根据数据结构，使用递归构建布局。

vue 递归组件实现目录树，数据处理
 
我这个是移动端的目录树 代码都是通用的
 第一次发表文章，话不多说直接上代码 样式可以自己调整
 
 
子组件ChapterTree.vue
 
子组件ChapterTree.vue
<template>
  <div>
    <div class="list-item" v-for="(item, index) in chapterList" :key="index">
      <div class="item-name">
        <span @click.stop="openMenu(item, index)">
          {{item.nodeName}}
          <!-- 引入了外部图标-->
          <van-icon
            v-if="item.children && item.children.length > 0"
            :name="item.expanded ? 'arrow-up':'arrow-down'"
          />
        </span>

      </div>
      <div
        :class="item.expanded ? 'open':'close'"
        class="children-item"
        v-if="item.children"
      >
      <!-- 递归调用自身 参数为children -->
        <ChapterTree
          :chapterList="item.children"
          type="detail"
          @close="close"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ChapterTree',
  props: {
    chapterList: {
      type: Array,
      default: () => ([])
    },
    cId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      arrray: this.chapterList,
      showMenu: false
    }
  },
  methods: {
    openMenu (item) {
      if (item.children.length > 0) {
        item.expanded = !item.expanded
      } else {
        this.$router.push(
          { path: `要跳转的路径` }
        )
        this.close()
      }
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>
 
在父组件ChapterList.vue中调用子组件ChapterTree
 
父组件ChapterList.vue
<template>
  <div class="chapter">
    <div class="item-name">
      <span class="chapter-tip">共{{chapterDetail.chapterNum}}章节</span>
    </div>
    <ChapterTree class="tree' :chapterList="chapterList" :kId="knowledgeId" @close="close"></ChapterTree>
  </div>
</template>
<script>
import {
  getKnowledgeDetail,
  getTree
} from '@/api/knowledge'
import ChapterTree from './components/chapterTree'
export default {
  name: 'ChapterList',
  components: {
    ChapterTree
  },
  data () {
    return {
      chapterList: [] //后台请求回来的数据
    }
  },
  watch: {
    cId (newVal) {
      this.getTree()
    }
  },
  created () {
    this.getTree()// 获取目录树数据
  },
  methods: {
    getTree () {
      getTree({ collectionId: this.knowledgeId })
        .then(res => {
          this.chapterList = this.dealTree(res.data)
        })
        .catch(err => {
          console.log(err, '错误')
        })
    },
    //递归处理目录数据
    dealTree (menuData) {
      const arr = []
      for (let i = 0; i < menuData.length; i++) {
        const item = menuData[i]
        if (item.children && item.children.length) {
        //如果又自己数据 加一个字段 以便于控制菜单展收
          item.expanded = false
          item.children = this.dealTree(item.children)
        } else {
          item.children = []
        }
        arr.push(item)
      }
      return arr
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>
 
有问题请留言哦~~~~

效果图
 
 
 
代码
 
组件部分 components/leftTree.vue
 
<template>
    <div>
        <ul class="all-list">
            <li v-for="(item, i) in list" :key="item.key">
            <!-- Antd的双击功能 这个看个人需求，不需要的话把'<div class="tree-item expend></div>'提取出来就可以了 -->
              <a-dropdown :trigger="['contextmenu']">
                <a-menu slot="overlay">
                  <a-menu-item key="1">
                    打开文件
                  </a-menu-item>
                  <a-menu-item key="2">
                    新建文件
                  </a-menu-item>
                  <a-menu-item key="3">
                    保存
                  </a-menu-item>
                  <a-menu-item key="4">
                    删除
                  </a-menu-item>
                </a-menu>
                <div class="tree-item expend">
                    <div
                        v-if="item.icon === 'file' || item.icon === 'openfile'"
                        class="icon-size"
                        :class="
                            openArr.includes(i) ? 'reduce-icon' : 'expend-icon'
                        "
                        @click="toggle(i)"
                    ></div>

                    <i v-if="item.icon === 'file'"
                        ><img src="../assets/file.png"
                    /></i>
                    <i v-if="item.icon === 'openfile'"
                        ><img src="../assets/openfile.png"
                    /></i>
                    <i v-if="item.icon === 'vue'"
                        ><img src="../assets/Vue.png"
                    /></i>
                    <i v-if="item.icon === 'js'"
                        ><img src="../assets/js.png"
                    /></i>
                    <i v-if="item.icon === 'react'"
                        ><img src="../assets/React.png"
                    /></i>
                    <i v-if="item.icon === 'sass'"
                        ><img src="../assets/Sass.png"
                    /></i>
                     <i v-if="item.icon === 'vim'"
                        ><img src="../assets/vimeo.png"
                    /></i>
                     <i v-if="item.icon === 'ts'"
                        ><img src="../assets/ts.png"
                    /></i>
                     <i v-if="item.icon === 'php'"
                        ><img src="../assets/php.png"
                    /></i>
                    <i v-if="item.icon === 'less'"
                        ><img src="../assets/less.png"
                    /></i>
                    <i v-if="item.icon === 'java'"
                        ><img src="../assets/java.png"
                    /></i>
                    <i v-if="item.icon === 'c++'"
                        ><img src="../assets/c++.png"
                    /></i>
                    <i v-if="item.icon === 'markdown'"
                        ><img src="../assets/markdown.png"
                    /></i>
                    <i v-if="item.icon === 'py'"
                        ><img src="../assets/py.png"
                    /></i>
                    <i v-if="item.icon === 'go'"
                        ><img src="../assets/go.png"
                    /></i>
                    <span class="content" @click="changeActive(item, i)">{{
                        item.title
                    }}</span>
                </div>
              </a-dropdown>

                <!-- 递归 -->
                <div
                    v-show="openArr.includes(i)"
                    v-if="item.children && item.children.length"
                >
                    <leftTree class="item" :list="item.children"></leftTree>
                </div>
            </li>
        </ul>
    </div>
</template>
 
<script>
export default {
    name: "leftTree",
    data() {
        return {
            openArr: [],
            checkboxIds: [],
        };
    },
    props: {
        list: {
            type: Array,
        },
    },

    methods: {
        toggle(i) {
            if (this.openArr.includes(i)) {
                let index = this.openArr.indexOf(i);
                this.openArr.splice(index, 1);
            } else {
                this.openArr.push(i);
            }
        },
        changeActive(item, i) {
            if (!item.children) {
                if (item.icon === "file") {
                    this.toggle(i);
                    item.icon = "openfile";
                } else if (item.icon === "openfile") {
                    this.toggle(i);
                    item.icon = "file";
                } else {
                    alert("最后一个文件");
                }
            } else {
                if (item.icon === "file") {
                    this.toggle(i);
                    item.icon = "openfile";
                } else if (item.icon === "openfile") {
                    this.toggle(i);
                    item.icon = "file";
                }
            }
        },
    },
};
</script>
<style lang='less' scoped>
i {
    line-height: 0;
    img {
      width: 16px;
      height: 16px;
    }
}
.item {
    padding-left: 4px;
}
.bold {
    font-weight: bold;
}
ul {
    line-height: 1.5em;
    list-style-type: none;
    white-space: nowrap;
    position: relative;
}
li {
    list-style-type: none;
    padding: 4px;
    user-select: none;
}

.tree-item {
    display: flex;
    align-items: center;
}
.expend {
    position: relative;
}

.expend::before {
    content: "";
    position: absolute;
    width: 6px;
    left: 9px;
    top: 10px;
    border-top: 1px dotted #c3c5c8;
}

.all-list::before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 40px);
    left: 48px;
    top: 20px;
    border-left: 1px dotted #c3c5c8;
}

.item .expend::before {
    content: "";
    position: absolute;
    width: 6px;
    left: -11px;
    top: 10px;
    border-top: 1px dotted #c3c5c8;
}

.item .all-list::before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 12px);
    left: 20px;
    top: 0;
    border-left: 1px dotted #c3c5c8;
}

.item ul {
    padding-left: 2em;
}

.content {
    padding-left: 4px;
    transition: all 0.2s linear;
    &:hover {
      background: #c3c5c8;
    }
}
.spacing {
    display: inline-block;
    width: 18.5px;
    height: 1em;
}
.icon-size {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.expend-icon {
    background: url("../assets/Plus.png") no-repeat center;
    background-size: cover;
    width: 9px;
    height: 9px;
}
.reduce-icon {
    background: url("../assets/minus.png") no-repeat center;
    background-size: cover;
    width: 9px;
    height: 9px;
}

.ant-dropdown-menu {
  width: 180px;
  background: #353b44;
  li {
    color: #fff;
    padding: 2px 10px;
    &:hover {
      background: rgb(13, 89, 175);
    }
  }
}
</style>
 
引用区域 views/home.vue
 
<template>
    <div class="home">
        <tree :list="line" />
    </div>
</template>

<script>
import tree from "@/components/leftTree.vue";

export default {
    name: "Home",
    components: {
        tree,
    },
    data() {
        return {
            line: [
                {
                    title: "Project",
                    type: 1,
                    key: "1",
                    icon: "file",
                    children: [
                        {
                            title: "index.vim",
                            key: "1-1",
                            type: 3,
                            icon: "vim",
                        },
                    ],
                },
                {
                    title: "Menu",
                    type: 1,
                    key: "2",
                    icon: "file",
                },
                {
                    title: "Components",
                    type: 1,
                    key: "3",
                    icon: "file",
                    children: [
                        {
                            title: "Index",
                            type: 2,
                            key: "3-1",
                            icon: "file",
                            children: [
                                {
                                    title: "index.vue",
                                    type: 3,
                                    key: "3-1-1",
                                    icon: "vue",
                                },
                                {
                                    title: "index.react",
                                    type: 3,
                                    key: "3-1-2",
                                    icon: "react",
                                },
                                {
                                    title: "js",
                                    type: 2,
                                    key: "3-1-3",
                                    icon: "file",
                                    children: [
                                        {
                                            title: "index.js",
                                            type: 3,
                                            key: "3-1-1-1-1",
                                            icon: "js",
                                        },
                                    ],
                                },
                                {
                                    title: "index.sass",
                                    type: 3,
                                    key: "3-1-4",
                                    icon: "sass",
                                },
                                {
                                    title: "index.less",
                                    type: 3,
                                    key: "3-1-5",
                                    icon: "less",
                                },
                            ],
                        },
                        {
                            title: "index.php",
                            type: 3,
                            key: "3-2",
                            icon: "php",
                        },
                    ],
                },
                {
                    title: "node_modules",
                    type: 1,
                    key: "4",
                    icon: "file",
                    children: [
                        {
                            title: "index.java",
                            key: "4-1",
                            type: 3,
                            icon: "java",
                        },
                        {
                            title: "index.go",
                            key: "4-2",
                            type: 3,
                            icon: "go",
                        },
                        {
                            title: "index.py",
                            key: "4-3",
                            type: 3,
                            icon: "py",
                        },
                        {
                            title: "index.c",
                            key: "4-4",
                            type: 3,
                            icon: "c++",
                        },
                        {
                            title: "README.md",
                            key: "4-5",
                            type: 3,
                            icon: "markdown",
                        },
                    ],
                },
            ],
        };
    },
};
</script>
 
ps: 本人是前端小白，发帖只是为了做笔记，代码可能有很多的优化空间，另外也希望可以帮助到其他有需要的朋友，谢谢。

 
vue 结构树组件
 
 Vue树列表 (vue-tree-list)
 
 
A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.
 
 
 树结构的Vue组件。 支持添加treenode / leafnode，编辑节点名称并拖动。 
 
 

  View Demo 
  查看演示 
  Download Source 
  下载源 
 
 

 

  
 
 
 
 
 
 用 (use)
 
 
npm install vue-tree-list
 
 
 npm install vue-tree-list 
 
 
<button @click="addNode">Add Node</button>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
  {{newTree}}
</pre>
...
import { VueTreeList, Tree, TreeNode } from '../src'
export default {
  components: {
    VueTreeList
  },
  data () {
    return {
      newTree: {},
      data: new Tree([
        {
          name: 'Node 1',
          id: 1,
          pid: 0,
          dragDisabled: true,
          children: [
            {
              name: 'Node 1-2',
              id: 2,
              isLeaf: true,
              pid: 1
            }
          ]
        },
        {
          name: 'Node 2',
          id: 3,
          pid: 0,
          dragDisabled: true
        },
        {
          name: 'Node 3',
          id: 4,
          pid: 0
        }
      ])
    }
  },
  methods: {
    addNode: function () {
      var node = new TreeNode({ name: 'new node', isLeaf: false })
      if (!this.data.children) this.data.children = []
      this.data.addChildren(node)
    },

    getNewTree: function () {
      var vm = this
      function _dfs (oldNode) {
        var newNode = {}

        for (var k in oldNode) {
          if (k !== 'children' && k !== 'parent') {
            newNode[k] = oldNode[k]
          }
        }

        if (oldNode.children && oldNode.children.length > 0) {
          newNode.children = []
          for (var i = 0, len = oldNode.children.length; i < len; i++) {
            newNode.children.push(_dfs(oldNode.children[i]))
          }
        }
        return newNode
      }

      vm.newTree = _dfs(vm.data)
    },

    onClick(model) {
      console.log(model)
    }
  }
}
 
 
 道具 (props)
 
 
default-tree-node-name
 
 
 默认树节点名称 
 
 
Default name for new treenode.
 
 
 新treenode的默认名称。 
 
 
default-leaf-node-name
 
 
 默认叶子节点名称 
 
 
Default name for new leafnode.
 
 
 新LeafNode的默认名称。 
 
 
 大事记 (events)
 
 
click
 
 
 点击 
 
 
<vue-tree-list @click="onClick" ...
...
onClick(model) {
  console.log(model)
}
...
 
 
 禁止拖动 (Forbid dragging)
 
 
Use dragDisabled to forbid dragging:
 
 
 使用dragDisabled禁止拖动： 
 
 
data: new Tree([
  {
    name: 'Node 1',
    id: 1,
    pid: 0,
    dragDisabled: true,
  ...
 
 

  
翻译自: https://vuejsexamples.com/a-vue-component-for-tree-structure/
 
 
vue 结构树组件