精华内容
下载资源
问答
  • vue目录树组件(树状结构列表)

    千次阅读 2020-09-14 09:56:39
    单击导航,在右侧查询出当前导航下所有目录结构,可以新建目录。新增类型分为三种,目录可以无限嵌套,当然也可以设置层级。 页面整体布局 页面分为左右两个部分。左侧列表,通过路由跳转显示右侧内容。左侧列表...

    一般数据类展示内容,大多采用树状结构展示内容。类似效果如下:

    关注微信公众号,查看效果

    在这里插入图片描述

    左侧是导航分类,可以进行新建,对单项导航分享和删除。单击导航,在右侧查询出当前导航下所有目录结构,可以新建目录。新增类型分为三种,目录可以无限嵌套,当然也可以设置层级。

    页面整体布局

    页面分为左右两个部分。左侧列表,通过路由跳转显示右侧内容。左侧列表分为上下两块,顶部是添加按钮,下面是导航列表。

    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 实现目录树 递归组件 菜单展收

    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的双击功能 这个看个人需求,不需要的话把...

    效果图

    代码

    组件部分 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,编辑...

    vue 结构树组件

    Vue树列表 (vue-tree-list)

    A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.

    树结构的Vue组件。 支持添加treenode / leafnode,编辑节点名称并拖动。

    vue-tree-list

    (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 结构树组件

    展开全文
  • vue2形组件,打造vue2下最简洁高效的组件
  • vue 文件目录结构详解 vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧项目简介基于 vue.js...
  • 最近在做一个接口自动化测试平台,需要前端展示当前服务器上的测试用例,自然而然的想到展示成一个文件目录树的形状,这样不管浏览、添加、删除等操作都可以比较方便的实现,也比较方便浏览。( BTW,你是不是觉着我...
  • 日前,在工作中有一个类似chrome书签管理器的需求,在调研了iview的Tree组件,Vue-dragging,Vue-...本文着重实现形结构的展示,拖拽功能的完善后续会完善。 Vue作为组件化的框架,原则上所有的页面元素都由数据...
  • vue开发:vue目录结构

    千次阅读 2017-07-13 10:52:28
    作者:阿安 链接:...来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 ...目录结构 ├── index.html 入口页面 ├── build
  • vue下拉框形多选框 vue-multiselect-dual-listbox (vue-multiselect-dual-listbox) Searchable Dual Select box plugin. 可搜索的双重选择框插件。 View Demo 查看演示 View Github 查看Github Multi-select ...
  • 导航栏菜单 vue 形 导航导航 (vue-tree-navigation) A Vue.js tree navigation menu with unlimited number of levels and minimum styles included Vue.js导航菜单,其中包含无限数量的级别和最小样式 View...
  • vue 形插件 vue-jstree (vue-jstree) A tree plugin for vue2. vue2的形插件。 View demo 查看演示 Download Source 下载源 NPM (NPM) npm install vue-jstree ES6 (ES6) import VJstree from 'vue-js...
  • <template> <el-tree ref="tree" :data="layers" #绑定数据 ...node-key="name" #key为对象的name属性 ...:default-expand-all="true" #默认全部展开 ...@check-change="checkChange" #节点选中改变事件 ...
  • vue实现形tree组件

    2020-03-09 23:42:38
    一.实现效果 ​​​​ 二.json数据格式展示 三.实现效果 1.点击时箭头(?...2.最后一层时无箭头且输出json数据中对应value值 四....四.代码实现 父组件app.vue <template> <div class =...
  • vue工程目录详解

    千次阅读 2019-09-04 13:23:30
    vue 文件目录结构详解 项目简介 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、scss 等最新语言特性。项目包含: 基础库: vue.js、vue-router、vuex、whatwg-fetch 编译/...
  • Vue框架目录

    2020-08-17 18:19:06
    文章目录node_modulespublicassetssrc.gitignorebabel.config.jspackage.jsonpackage-lock.jsonvue....类似于vue2中的 static 目录。 assets build之后,assets目录中的文件,会被合并到一个文件中,然后进行压缩。多
  • 该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install -g vue-cli 全局安装vue-cli之后,使用该脚手架的相关...
  • vue项目目录介绍

    2019-09-23 17:56:58
    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build | build.js | check-versions.js | dev-client.js | dev-server.js | ...
  • // 展开或者隐藏下级目录 showHidden(item, index) { this.parentTreeData.forEach(value => { // parentTreeData[i]的show属性不等于当前数据的isShow属性那么menuList[i]等于false if (value.isShow !== ...
  • vue 递归组件 (形结构目录

    千次阅读 2019-08-21 17:46:19
    在项目中 有时需要 分级目录 目录 这时就可以用到递归组件了 递归组件 是指就是组件中嵌套组件自身 首先我们需要一组这样的数据 [ { "name": "一级目录", cList: [ { "name": "二级目录" }, { "name": ...
  • Vue.js教程-Vue项目的目录结构和.vue文件的构成

    千次阅读 多人点赞 2020-07-28 00:59:54
    Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...
  • vue实现形结构增删改查

    千次阅读 2019-08-05 18:03:49
    其实很多公司都会有类似于用户权限的增删改查功能,正好最近我刚写了一个形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~ 先附上一下效果图 这个是没有点击编辑时,产品的...
  • 而且我对于形组件的自定义节点这块,还是没有理解透彻。也希望有大神帮忙解惑。 然后其实我的眼界还是有限,一直都停留在ui组件上面,但是作为一个普通的前端,大家不都干这样的事情吗?既然你觉得我眼界小,那么...
  • vue 文件目录详解

    2021-03-12 22:52:05
    项目简介 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、scss 等最新语言特性。项目包含: 基础库: vue.js、vue-router、vuex、whatwg-... 目录结构 ├──...
  • Vue封装形菜单组件

    万次阅读 2018-07-16 17:44:29
    csdn终于更新完成了哈,ok,...像这种形结构的核心思想就是:递归思想,知道使用递归,其实这个例子函数的封装也就很简单喽  实现步骤:  设置的props:  data 数据结构 默认为 []  定制模板:  不可定制...
  • 这里写自定义目录标题如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的...
  • vue开发目录

    2017-07-04 22:57:00
    基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现...
  • Vue编写的形tree组件

    万次阅读 多人点赞 2019-02-21 10:50:46
    近期在进行vue的学习,自研的vue项目需要一个tree组件。由于在学习阶段,不想‘拿来主义’,拿别人写好的组件使用,对于处于学习阶段的开发者来说不是一件好事,虽然拿别人开发好的东西过来用可以快速进行业务开发,...
  • Vue 源码目录学习笔记

    2019-08-05 15:04:28
    Vue.js 的源码都在 src 目录下,其目录结构如下。 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,963
精华内容 4,385
关键字:

vue目录树

vue 订阅