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

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层级关系的数据管理的更多相关文章

  1. Vue 使用Spread.js没有层级关系(隐藏与显示)

    Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题

  2. NGUI 层级关系控制

    NGUI元素的遮挡情况是不依赖空间关系,所以在NGUI上添加特效有时候特别蛋疼,特别是美术同学还要依赖空间关系来控制特效效果,那先看看看NGUI的层级是怎么处理的,不过下面的描述都是针对单个相机下的P ...

  3. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

  4. 【吐血分享】SQL Server With As 递归获取层级关系数据

    纯洁的一周又开始了,今天看到一则新闻,笑尿了,和袁友们一起娱乐下 最近两月在做基于Saas模式的人力资源管理产品,平常数据库设计我经常会遇到如下需求场景: 以前商城类网站在设计类型表的时候,设计成单表 ...

  5. CTE计算层级关系

    推广渠道表有ParentID字段,代表上下层级关系.现要统计每个推广员,推广了多少人? --创建表结构,插入测试数据 USE DBA_Monitor GO CREATE TABLE [dbo].[TG ...

  6. Unity NGUI和UGUI与模型、特效的层级关系

    目录 1.介绍两大UI插件NGUI和UGUI 2.unity渲染顺序控制方式 3.NGUI的控制 4.UGUI的控制 5.模型深度的控制 6.粒子特效深度控制 7.NGUI与模型和粒子特效穿插层级管理 ...

  7. MFC窗口的父子关系和层级关系

    一直对窗口之间的关系有些混乱,遇到需要指定父窗口的函数时常常要考虑很久,究竟父窗口是哪个窗口,遂上网查资料,略有所悟,简记如下: 对话框中的所有控件(比如Button等)都是其子窗口.        ...

  8. NGUI与特效的层级关系

    通过调整特效的 render queue 来解决特效与NGUI界面之间的层级关系问题,用以下脚本解决: using System.Collections.Generic; using UnityEng ...

  9. php解析出带层级关系的mpp文件

    本来要使用DHX gantt插件自带的API做导入,可是做完后,又发现不稳定,不能访问了 可能是屏蔽掉了 所以又想起可以使用javaBridge,借用java的MPXJ php解析mpp的 上一篇介绍 ...

随机推荐

  1. CentOS7 网络NAT模式

    问题:安装完毕ping命令不能用,然后改为桥接模式,ping可以用. 先了解桥接,NAT 的含义. 桥接:在bridged模式下,VMWare虚拟出来的操作系统就像是局域网中的一台独立的主机,它可以访 ...

  2. k8s HPA自动收缩

    HPA自动收缩 autoscale 自动调整一个 Deployment, ReplicaSet, 或者 ReplicationController 的副本数量 #创建一个replicaset测试 [r ...

  3. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  4. 了解AutoCAD对象层次结构 —— 4 —— 符号表

    上一小节我们看到了符号表包含了一系列的表(共9个),这些表数量是固定的,用户不能增加新的表,也不能删除现有的表. 符号表名称 符号表功能 Block Table 块表 存储图形数据库中定义的块.此表中 ...

  5. 使用Guava获取某一个类的指定超类上的泛型Type T

    package com.geostar.gfstack.operationcenter.log.common.hibernate; import com.geostar.gfstack.operati ...

  6. scrapy爬取知乎问答

    登陆 参考 https://github.com/zkqiang/Zhihu-Login # -*- coding: utf-8 -*- import scrapy import time impor ...

  7. 【BZOJ5119】【CTT2017】生成树计数 DP 分治FFT 斯特林数

    CTT=清华集训 题目大意 有\(n\)个点,点权为\(a_i\),你要连接一条边,使该图变成一颗树. 对于一种连边方案\(T\),设第\(i\)个点的度数为\(d_i\),那么这棵树的价值为: \[ ...

  8. 【XSY1522】灯 乱搞

    题目大意 ​ \(n\)盏灯排成一列,标号\(1\)到\(n\),一开始标号为\(1\)的灯亮着. ​ 现在依次对于\(2\)~\(n\)的每一个质数\(p_i\),指定一盏亮着的灯\(a_i\),点 ...

  9. ElasticSearch5.4.1 搜索引擎搭建文档

    安装配置JDK环境JDK安装(不能安装JRE)JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-download ...

  10. Linux 通过Shell 查找问题进程 [转]

    背景介绍: 最近公司服务器不太稳定,总是在凌晨某个时段突发高负载情况,因为客观环境比较复杂,所以很难猜测出到底是哪个进程出现了问题,加之故障发生时,通常我在睡觉,等我被报警短信吵醒,通过公司 VPN ...