在我前面随笔《循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用》里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框、多文本框、下拉列表,以及按钮、图片展示、弹出对话框、表单处理,本篇随笔补充这一个主题,介绍树列表组件和下拉列表树组件在项目中的使用,以及一个SplitPanel的组件。

1、常规树列表控件的使用

众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加直观。

在Element里面也有一个el-tree的控件,如下所示,这里主要对它的各种属性和方法进行介绍。

简单的代码如下所示

<el-tree :data="data"  @node-click="handleNodeClick"></el-tree>

主要在script部分里面指定它的data数据,以及单击节点的事件处理,结合卡片控件的展示,我们可以把树放在其中进行展示

界面代码如下所示,通过 default-expand-all 可以设置全部展开,icon-class 指定节点图标(也可以默认不指定)

        <el-card class="box-card">
<div slot="header" class="clearfix">
<span>树列表</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div>
<el-tree
style="padding-top:10px"
:data="treedata"
node-key="id"
default-expand-all
icon-class="el-icon-price-tag"
highlight-current
@node-click="handleNodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
{{ node.label }}
&nbsp;&nbsp;
</span>
</span>
</el-tree>
</div>
</el-card>

其中界面里面,我们通过 class="custom-tree-node",来指定树列表的展现内容,可以加入图标等信息

而在script里面,定义了一个treedata的属性

      // 初始化树列表
treedata: [
{
label: '一级 1',
id: '1',
children: [{
id: '1-1',
label: '二级 1-1',
children: [{
label: '三级 1-1-1',
id: '1-1-1'
}, {
label: '三级 1-1-2',
id: '1-1-2'
}, {
label: '三级 1-1-3',
id: '1-1-3'
}]
}]
}
]

如果设置有选择框,得到界面如下所示。

主要设置  show-checkbox 和 @check-change="handleCheckChange" 即可。

界面代码如下所示

<el-tree
style="padding-top:10px"
:data="treedata"
node-key="id"
default-expand-all
highlight-current
show-checkbox
:default-checked-keys="['1-1-1']"
@node-click="handleNodeClick"
@check-change="handleCheckChange"

>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
{{ node.label }}
&nbsp;&nbsp;
</span>
</span>
</el-tree>

而对于树列表,可以进行一个过滤处理操作,如下界面所示。

在内容区增加一个input的文本框进行过滤处理,并绑定对应的属性变量

<el-input
v-model="filterText"
placeholder="输入关键字进行过滤"
clearable
prefix-icon="el-icon-search"
/>

树列表控件需要增加过滤函数绑定 :filter-node-method="filterNode",如下代码所示。

<el-tree
ref="tree"
class="filter-tree"
style="padding-top:10px"
:data="treedata"
node-key="id"
default-expand-all
highlight-current
show-checkbox
:filter-node-method="filterNode"
@check-change="handleCheckChange"
@node-click="handleNodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
{{ node.label }}
&nbsp;&nbsp;
</span>
</span>
</el-tree>

script的处理代码如下所示,需要watch过滤的绑定值,变化就进行过滤处理。

为了在列表结合中进行快速的过滤,我们可以在上次介绍的列表界面里面增加一个树列表的快速查询处理。如下界面所示。

这里列表里面增加了一个第三方组件 splitpanes,用来划分区块展示,而且可以拖动,非常不错,地址是:https://github.com/antoniandre/splitpanes

这个组件的Demo展示地址如下所示:https://antoniandre.github.io/splitpanes

效果大概如下所示

npm 安装如下所示

npm i --S splitpanes

安装成功后,然后在vue文件的script部分里面引入即可

import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

它的使用代码也很简单

<splitpanes style="height: 400px">
<pane min-size="20">1</pane>
<pane>
<splitpanes horizontal>
<pane>2</pane>
<pane>3</pane>
<pane>4<pane>
</splitpanes>
</pane>
<pane>5</pane>
</splitpanes>

我的列表界面使用了两个Panel即可实现左侧树的展示,和右侧常规列表查询的处理。

2、下拉框树列表的处理

除了常规的树列表展示内容外,我们也需要一个在下拉列表中展示树内容的界面组件。

这里又得引入一个第三方的界面组件,因此Element的Select组件不支持树列表。

GitHub地址:https://github.com/riophae/vue-treeselect

官网地址:https://vue-treeselect.js.org/

NPM安装:

npm install --save @riophae/vue-treeselect

界面代码如下所示。

<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>

这里的value就是选中的集合,options则是树列表的节点数据。

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default {
// register the component
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
}
</script>

我的测试界面代码如下所示

          <div style="height:180px">
<!--
v-model 绑定选中的集合
options 树节点数据
defaultExpandLevel 展开层次,Infinity为所有
flat 为子节点不影响父节点,不关联
-->
<treeselect
v-model="value"
:options="treedata"
:multiple="true"
:flat="true"
:default-expand-level="Infinity"
:open-on-click="true"
:open-on-focus="true"
clearable
:max-height="200"
/>
</div>
<script>
// import vue-treeselect component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default {
name: 'Tree',
components: { Treeselect },
data() {
return {
// 过滤条件
filterText: '',
// 初始化树列表
treedata: [
{
label: '一级 1',
id: '1',
children: [{
id: '1-1',
label: '二级 1-1',
children: [{
label: '三级 1-1-1',
id: '1-1-1'
}, {
label: '三级 1-1-2',
id: '1-1-2'
}, {
label: '三级 1-1-3',
id: '1-1-3'
}]
}]
}
],
value: ['1-1-2']
}
},
................
}
</script>

来一张几个树列表一起的对比展示界面。

以上就是普通树列表和下拉列表树展示的界面效果,往往我们一些特殊的界面处理,就需要多利用一些封装良好的第三方界面组件实现,可以丰富我们的界面展示效果。

列出以下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

  2. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  3. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  4. 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

    在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...

  5. 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

    我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...

  6. 循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

    在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...

  7. 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  8. 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...

  9. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

随机推荐

  1. Codeforces 909E(Coprocessor,双队列维护)

    题意:给出n个待处理的事件(0 ~n-1),再给出了n个标(0表示只能在主处理器中处理这个事件,1表示只能在副处理器中处理这个事件),处理器每次能处理多个任务.每个事件有关联,如果一个任务要在副处理器 ...

  2. ESXI 6.5利用Centos7重置root密码

    ESXI6.5宿主机,很久没有登录,再次登录的时候,发现忘记root密码了 1.先将刻录一个CentOS7的启动光盘或U盘,并将服务器的启动项修改为光盘 2.保存BIOS重启后,选择Troublesh ...

  3. vue 3.0新特性

    参考:  https://www.cnblogs.com/Highdoudou/p/9993870.html https://www.cnblogs.com/ljx20180807/p/9987822 ...

  4. Java Thread中,run方法和start方法的区别

     两种方法的区别: 1.start方法 用 start方法来启动线程,是真正实现了多线程, 通过调用Thread类的start()方法来启动一个线程,这时此线程处于就绪(可运行)状态,并没有运行,一旦 ...

  5. 前端ie7的兼容问题及解决方案(未完待续)

    最近在维护一些老的项目,需要兼容ie7 ,css3就不能用了,这里总结一下碰到的问题及解决方案. 1.盒模型 ie7.8  的盒模型都是 box-sizing为content-box的盒模型,这里在做 ...

  6. RN概述

    一.RN概述 中文网:http://reactnative.cn/ ReactNative:使用JS语法编写移动APP应用,RN会把JS转换为底层Java或OC, 最终运行于手机-------完全不依 ...

  7. DPDK 无锁队列Ring Library原理(学习笔记)

    参考自DPDK官方文档原文:http://doc.dpdk.org/guides-20.02/prog_guide/ring_lib.html 针对自己的理解做了一些辅助解释. 1 前置知识 1.1 ...

  8. 201771010128王玉兰《面向对象与程序设计(Java)》第十七周学习总结

    第一部分:理论基础 线程的同步 多线程并发运行不确定性问题解决方案:引入线 程同步机制,使得另一线程要使用该方法,就只 能等待. 在Java中解决多线程同步问题的方法有两种: - Java SE 5. ...

  9. MySQL(7)— 索引

    七.索引 MySQL官方对索引的定义为:索引(Index)是帮助 MySQL 高效 获取数据的数据结构. 7-1.索引的分类 主键索引 (primary key) 唯一的标识,主键不可重复,只能有一个 ...

  10. C语言经典笔试题目

    1.bool,float,指针变量 与 “零值” 比较的if语句 注意点:c语言中bool类型采用整数存储,0为false,非0均为true; float类型采用IEEE754标准,第一位符号位,中间 ...