vue层级关系的数据管理

最新推荐文章于 2024-09-04 07:07:12 发布

weixin_30367873

最新推荐文章于 2024-09-04 07:07:12 发布

阅读量946

点赞数

文章标签： javascript json ui ViewUI

原文链接：http://www.cnblogs.com/smart-girl/p/10633894.html

版权

项目背景：为一些有层级关系的数据管理做一套后台管理系统，例如一个小区，里面是有许多楼，楼里有许多层，每一层有许多不同的房······，现在就是要实现对这些数据进行增删改查操作。
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

转载于:https://www.cnblogs.com/smart-girl/p/10633894.html