vue框架下树列表组件如何应用,有哪些事项要注意
Admin 2022-07-19 群英技术资讯 372 次浏览
众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加直观。
在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 }} </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 }} </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 }} </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即可实现左侧树的展示,和右侧常规列表查询的处理。
除了常规的树列表展示内容外,我们也需要一个在下拉列表中展示树内容的界面组件。
这里又得引入一个第三方的界面组件,因此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>
来一张几个树列表一起的对比展示界面。
以上就是普通树列表和下拉列表树展示的界面效果,往往我们一些特殊的界面处理,就需要多利用一些封装良好的第三方界面组件实现,可以丰富我们的界面展示效果
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要给大家分享react中不可变值,对大家学习什么是不可变值和理解为何要用不可变值有一定的帮助,感兴趣的朋友可以参考一下,希望大家阅读完这篇文章能有所收获,下面我们一起来学习一下吧。
这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要为大家介绍了JavaScript中的原型和原型链,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
这篇文章主要介绍了JavaScript中let避免闭包造成问题,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
本篇文章给大家带来了关于JavaScript的相关知识,其中主要整理了日期对象Date的相关问题,包括了Date对象的创建、Date对象的方法等等内容,下面一起来看一下,希望对大家有帮助。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008