码迷,mamicode.com
首页 > 其他好文 > 详细

vue层级关系的数据管理

时间:2019-03-31 23:20:08      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:axios   bar   UNC   href   tps   选择   .data   动态   keep   

项目背景:为一些有层级关系的数据管理做一套后台管理系统,例如一个小区,里面是有许多楼,楼里有许多层,每一层有许多不同的房······,现在就是要实现对这些数据进行增删改查操作。
1.Tree(树形组件)

Sublime Text 3左侧的项目目录,就是有一定层级关系的“数据”被组织成Tree,然后单击各子树,会呈现不一样的内容,因此可借用这个设计思想来设计这一套系统的导航功能。为什么要做这个导航功能,因为若要简单实现,直接用一个选择器组件,放入所有可选项让用户进行选择即可,然而这样做的友好度不够。

例如,一哥们想进入小区内的A楼,13层找到1304房,而选择器实现无非2种方式:

第一种,级联选择器,我利用E UI里的级联选择器组件,未找到很好的动态追加选项的方法。

第二种,选择器备选项进行分组显示,这样首先是导致备选项数量冗长;其次需要一次性加载所有的数据,通常很多数据是用不上的,因此浪费服务器资源。

我的方式是,利用 Tree树形组件进行懒加载,未利用的数据不加载,单击箭头图标进行加载,单击树节点名称进行内容导航。以下是部分代码展示:

handleNodeClick(obj,node,data) {
            

            if (node.level === 1) {                

              this.$router.push('/ldTable');

            }else if (node.level === 2) {

              this.$router.push('/lcTable/'+node.data.lcId+'/'+node.data.name);

            }else if (node.level === 3) {

            }else if (node.level === 4) {

            }else if (node.level === 5) {

            }
            

        }

懒加载部分:

loadNode(node, resolve) {  

            if (node.level === 0) {  //level是树的层级
                return resolve([{ name: '列表' }]); //初始树节点
            }
            if (node.level === 1) { //层级为1的数据,层级2 3 4 5类同



                this.$axios.get('http:// ?', {
                    params: {
                        pageNo: 1
                    }
                })
                .then(function (response) {

            //拼装数据,[object] 
            
            let params=[]
            for(let i=0;i<response.data.data.length;i++){

                let param={leaf:false,name:'',ldId:''}
                param.leaf=false;
                param.name=response.data.data[i].ldName;
                param.ldId=response.data.data[i].id; //存储楼的id
                params.push(param);

            }
            
            return resolve(params);
                })
                .catch(function (error) {
                    console.log(error);
                });

                



            }
}

2.router

在Demo里,已经有两层路由的嵌套,而我们现在要利用树导航,则需要第三层路由嵌套,需要弄清以下问题:

① 上一层路由是什么,也就是第二层路由是什么,设置好router配置文件的Children

② 相应的也要嵌套,第一层在App.vue,第二层在外部导航菜单Home.vue里,第三层必须在显示树节点的文件里,因为要求同一页面上内容,左侧导航右侧显示,所以第三层路由显示内容的位置是在Home.vue的router-view显示内容里的router-view

其他,例如考虑到兼容问题,用 mode:‘hash‘ ,设置参数用以传递id和层级传递信息(注意:非层际)

<template>
    <div class="wrapper">
        <v-head></v-head>  <!--应注意到,这里的v-head是import进来并且注册可用的组件-->
        <v-sidebar></v-sidebar>
        <div class="content-box" :class="{'content-collapse':collapse}">
           <!--  <v-tags></v-tags> -->  <!-- 实现标签效果,这里由于业务逻辑不适用,所以不用 -->
            <div class="content">
                <transition name="move" mode="out-in">
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </transition>
            </div>
        </div>
    </div>
</template>

存在的问题:当我们已显示第三层内容时,单击左侧导航菜单(第二层),会无法切换,必须先点击树的任意节点,再点击导航菜单才可正常切换。
3.关于table的格式化显示

例如,我想当变量flag为1时,显示在家,为0时,显示离家。则需要用到格式化显示,具体实现如下:

 <el-table-column prop="flag" :formatter="formatter1"label="状态"  sortable width="150"></el-table-column>
formatter1(row, column) {

              if(row.flag==='1'){  //身份

                return '房主'

              }else{

                return '房客'

              }
              
       }

本文学习自:https://www.cnblogs.com/ww01/p/9060212.html

vue层级关系的数据管理

标签:axios   bar   UNC   href   tps   选择   .data   动态   keep   

原文地址:https://www.cnblogs.com/smart-girl/p/10633894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!