ElementUI浅尝辄止21：Tree 树形控件

树形组件：用清晰的层级结构展示信息，可展开或折叠。

树组件使用挺频繁的，常见于侧边栏树形目录、树形下拉选项按钮或搜索查询树形信息选项

1.如何使用？

基础的树形结构展示

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script>export default {data() {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '一级 2',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}, {label: '一级 3',children: [{label: '二级 3-1',children: [{label: '三级 3-1-1'}]}, {label: '二级 3-2',children: [{label: '三级 3-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}};
</script>

2.可选择

适用于需要选择层级时使用。

//可以动态加载节点数据。
<el-tree:props="props":load="loadNode"lazyshow-checkbox@check-change="handleCheckChange">
</el-tree><script>export default {data() {return {props: {label: 'name',children: 'zones'},count: 1};},methods: {handleCheckChange(data, checked, indeterminate) {console.log(data, checked, indeterminate);},handleNodeClick(data) {console.log(data);},loadNode(node, resolve) {if (node.level === 0) {return resolve([{ name: 'region1' }, { name: 'region2' }]);}if (node.level > 3) return resolve([]);var hasChild;if (node.data.name === 'region1') {hasChild = true;} else if (node.data.name === 'region2') {hasChild = false;} else {hasChild = Math.random() > 0.5;}setTimeout(() => {var data;if (hasChild) {data = [{name: 'zone' + this.count++}, {name: 'zone' + this.count++}];} else {data = [];}resolve(data);}, 500);}}};
</script>

3.懒加载自定义叶子节点

/*由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。*/<el-tree:props="props":load="loadNode"lazyshow-checkbox>
</el-tree><script>export default {data() {return {props: {label: 'name',children: 'zones',isLeaf: 'leaf'},};},methods: {loadNode(node, resolve) {if (node.level === 0) {return resolve([{ name: 'region' }]);}if (node.level > 1) return resolve([]);setTimeout(() => {const data = [{name: 'leaf',leaf: true}, {name: 'zone'}];resolve(data);}, 500);}}};
</script>

4.默认展开和默认选中

可将 Tree 的某些节点设置为默认展开或默认选中

/*分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。*/<el-tree:data="data"show-checkboxnode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]":props="defaultProps">
</el-tree><script>export default {data() {return {data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>

5.禁用状态

可将 Tree 的某些节点设置为禁用状态

//通过disabled设置禁用状态。<el-tree:data="data"show-checkboxnode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]">
</el-tree><script>export default {data() {return {data: [{id: 1,label: '一级 2',children: [{id: 3,label: '二级 2-1',children: [{id: 4,label: '三级 3-1-1'}, {id: 5,label: '三级 3-1-2',disabled: true}]}, {id: 2,label: '二级 2-2',disabled: true,children: [{id: 6,label: '三级 3-2-1'}, {id: 7,label: '三级 3-2-2',disabled: true}]}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>

6.树节点的选择

/*如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置node-key。*/<el-tree:data="data"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps">
</el-tree><div class="buttons"><el-button @click="getCheckedNodes">通过 node 获取</el-button><el-button @click="getCheckedKeys">通过 key 获取</el-button><el-button @click="setCheckedNodes">通过 node 设置</el-button><el-button @click="setCheckedKeys">通过 key 设置</el-button><el-button @click="resetChecked">清空</el-button>
</div><script>export default {methods: {getCheckedNodes() {console.log(this.$refs.tree.getCheckedNodes());},getCheckedKeys() {console.log(this.$refs.tree.getCheckedKeys());},setCheckedNodes() {this.$refs.tree.setCheckedNodes([{id: 5,label: '二级 2-1'}, {id: 9,label: '三级 1-1-1'}]);},setCheckedKeys() {this.$refs.tree.setCheckedKeys([3]);},resetChecked() {this.$refs.tree.setCheckedKeys([]);}},data() {return {data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>

7.自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

/*可以通过两种方法进行树节点内容的自定义：render-content和 scoped slot。使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以render-content示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。*/<div class="custom-tree-container"><div class="block"><p>使用 render-content</p><el-tree:data="data"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false":render-content="renderContent"></el-tree></div><div class="block"><p>使用 scoped slot</p><el-tree:data="data"show-checkboxnode-key="id"default-expand-all:expand-on-click-node="false"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttontype="text"size="mini"@click="() => append(data)">Append</el-button><el-buttontype="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree></div>
</div><script>let id = 1000;export default {data() {const data = [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}];return {data: JSON.parse(JSON.stringify(data)),data: JSON.parse(JSON.stringify(data))}},methods: {append(data) {const newChild = { id: id++, label: 'testtest', children: [] };if (!data.children) {this.$set(data, 'children', []);}data.children.push(newChild);},remove(node, data) {const parent = node.parent;const children = parent.data.children || parent.data;const index = children.findIndex(d => d.id === data.id);children.splice(index, 1);},renderContent(h, { node, data, store }) {return (<span class="custom-tree-node"><span>{node.label}</span><span><el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button><el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button></span></span>);}}};
</script><style>.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;}
</style>

8.节点过滤

通过关键字过滤树节点

/*在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。*/<el-inputplaceholder="输入关键字进行过滤"v-model="filterText">
</el-input><el-treeclass="filter-tree":data="data":props="defaultProps"default-expand-all:filter-node-method="filterNode"ref="tree">
</el-tree><script>export default {watch: {filterText(val) {this.$refs.tree.filter(val);}},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;}},data() {return {filterText: '',data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>

9.手风琴模式

对于同一级的节点，每次只能展开一个

<el-tree:data="data":props="defaultProps"accordion@node-click="handleNodeClick">
</el-tree><script>export default {data() {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '一级 2',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}, {label: '一级 3',children: [{label: '二级 3-1',children: [{label: '三级 3-1-1'}]}, {label: '二级 3-2',children: [{label: '三级 3-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}};
</script>

 10.可拖拽节点

通过 draggable 属性可让节点变为可拖拽。

<el-tree:data="data"node-key="id"default-expand-all@node-drag-start="handleDragStart"@node-drag-enter="handleDragEnter"@node-drag-leave="handleDragLeave"@node-drag-over="handleDragOver"@node-drag-end="handleDragEnd"@node-drop="handleDrop"draggable:allow-drop="allowDrop":allow-drag="allowDrag">
</el-tree><script>export default {data() {return {data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2',children: [{id: 11,label: '三级 3-2-1'}, {id: 12,label: '三级 3-2-2'}, {id: 13,label: '三级 3-2-3'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleDragStart(node, ev) {console.log('drag start', node);},handleDragEnter(draggingNode, dropNode, ev) {console.log('tree drag enter: ', dropNode.label);},handleDragLeave(draggingNode, dropNode, ev) {console.log('tree drag leave: ', dropNode.label);},handleDragOver(draggingNode, dropNode, ev) {console.log('tree drag over: ', dropNode.label);},handleDragEnd(draggingNode, dropNode, dropType, ev) {console.log('tree drag end: ', dropNode && dropNode.label, dropType);},handleDrop(draggingNode, dropNode, dropType, ev) {console.log('tree drop: ', dropNode.label, dropType);},allowDrop(draggingNode, dropNode, type) {if (dropNode.data.label === '二级 3-1') {return type !== 'inner';} else {return true;}},allowDrag(draggingNode) {return draggingNode.data.label.indexOf('三级 3-2-2') === -1;}}};
</script>

上述内容即为Tree树组件的详细使用方法，若想深入浅出可以前往Tree组件 。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/70552.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

TypeScript内置类型有哪些？

TypeScript内置类型有哪些？

Partial Partial用于将给定类型的所有属性设置为可选。换句话说&#xff0c;Partial 可以创建一个新的类型&#xff0c;该类型具有与原始类型相同的属性&#xff0c;但是这些属性都是可选的。使用 Partial 可以很方便地定义一个对象&#xff0c;其中的属性可以选择性地进行赋值…
阅读更多...
借助各大模型的优点生成原创视频（真人人声）Plus

借助各大模型的优点生成原创视频（真人人声）Plus

【技术背景】 众所周知&#xff0c;组成视频的3大元素&#xff0c;即文本语音图片。接着小编逐一介绍生成原创视频的过程。 【文本生成】 天工AI搜索&#xff08;thttp://iangong.cn&#xff09; 直接手机短信验证就可以使用&#xff0c;该大模型已经接入互联网&#xff0c…
阅读更多...
git_合并分支

git_合并分支

1、环境 (1)将测试分支dev合并到master分支。 (2)使用merge命令。 2、合并步骤 (1)切换到master分支 git checkout master (2)如果是多人开发的话&#xff0c;需要把远程master上的代码pull下来。 //如果是自己一个开发就没有必要了&#xff0c;不过为了保险起见还是pul…
阅读更多...
什么是IIFE（Immediately Invoked Function Expression）？它有什么作用？

什么是IIFE（Immediately Invoked Function Expression）？它有什么作用？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐IIFE 的基本语法⭐IIFE 的主要作用⭐如何使用 IIFE 来创建私有变量和模块封装⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅…
阅读更多...
GOOGLE SRE 运维模式解读

GOOGLE SRE 运维模式解读

一、SRE核心是什么 我总结下来是&#xff1a;通过软件工程的方式开发&#xff08;GOOGLE规定SRE团队必须将50%的精力花在真实的开发工作上&#xff09;一些自动化的工具系统来解放传统运维工程师大量重复和手工操作&#xff0c;从而让新生代的SRE工程师有更多的时间&#xff1…
阅读更多...
五种定时任务方案(Timer+ScheduleExecutorService+spring task+多线程执行+quartz)

五种定时任务方案(Timer+ScheduleExecutorService+spring task+多线程执行+quartz)

方案一&#xff1a;Timer (1)Timer.schedule(TimerTask task,Date time)安排在制定的时间执行指定的任务。 (2)Timer.schedule(TimerTask task,Date firstTime ,long period)安排指定的任务在指定的时间开始进行重复的固定延迟执行&#xff0e; (3)Timer.schedule(TimerTask…
阅读更多...
YashanDB：潜心实干，数据库核心技术突破没有捷径可走

YashanDB：潜心实干，数据库核心技术突破没有捷径可走

都说数据库是三大基础软件中的一块硬骨头&#xff0c;技术门槛高、研发周期长、工程要求高&#xff0c;市场长期被几大巨头所把持。 因此&#xff0c;实现突破一直是中国数据库产业的夙愿。自上个世纪80年代起&#xff0c;中国数据库产业走过艰辛坎坷的四十余载&#xff0c;终…
阅读更多...
【数据结构】二叉搜索树——二叉搜索树的概念和介绍、二叉搜索树的简单实现、二叉搜索树的增删查改

【数据结构】二叉搜索树——二叉搜索树的概念和介绍、二叉搜索树的简单实现、二叉搜索树的增删查改

文章目录 二叉搜索树1. 二叉搜索树的概念和介绍2. 二叉搜索树的简单实现2.1二叉搜索树的插入2.2二叉搜索树的查找2.3二叉搜索树的遍历2.4二叉搜索树的删除2.5完整代码和测试 二叉搜索树 1. 二叉搜索树的概念和介绍 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&…
阅读更多...
【Spring 事务和事务传播机制】

【Spring 事务和事务传播机制】

目录 1 事务概述 1.1 为什么需要事务 1.2 事务的特性 1.3 Spring 中事务的实现 2 Spring 声明式事务 2.1 Transactional 2.2 Transactional 的作用范围 2.3 Transactional 的各种参数 2.3.1 ioslation 2.4 事务发生了异常&#xff0c;也不回滚的情况 异常被捕获时 3 事务的传…
阅读更多...
oracle数据库给用户授权DBA权限Oracle查看哪些用户具有DBA权限

oracle数据库给用户授权DBA权限Oracle查看哪些用户具有DBA权限

oracle数据库给用户授权DBA权限 步骤一&#xff1a;以sysdba身份登录到Oracle数据库 在授予DBA权限之前&#xff0c;我们首先要以sysdba身份登录到Oracle数据库。使用以下命令登录&#xff1a; sqlplus / as sysdba步骤二&#xff1a;创建用户&#xff08;如有用户跳过&#…
阅读更多...
通过 Blob 对二进制流文件下载实现文件保存下载

通过 Blob 对二进制流文件下载实现文件保存下载

原理&#xff1a;前端将二进制文件做转换实现下载: 请求后端接口->接收后端返回的二进制流(通过二进制流&#xff08;Blob&#xff09;下载,把后端返回的二进制文件放在 Blob 里面)->再通过file-saver插件保存 页面上使用&#xff1a; <span click"downloadFil…
阅读更多...
Linux: memory: memblock: debug

Linux: memory: memblock: debug

文章目录 代码memblock=debug实例log代码 将内存相关的一些日志打开： static int __init early_memblock(char *p) {if (p && strstr(p, "debug")
阅读更多...
如何使用API数据接口给自己创造收益

如何使用API数据接口给自己创造收益

使用API数据接口创造收益的方法有很多&#xff0c;以下是一些常见的方法&#xff0c;并附有代码示例&#xff1a; 一、数据分析与预测 通过获取API数据接口中的大量数据&#xff0c;我们可以进行深入的数据分析&#xff0c;并利用这些数据来预测未来的趋势和行为。例如&#…
阅读更多...
作为产品经理，有必要考PMP或者NPDP么？

作为产品经理，有必要考PMP或者NPDP么？

产品经理的核心竞争力是什么? 三点&#xff1a;知识、能力和决策 懂得越多&#xff0c;能力越强&#xff0c;决策越正确&#xff0c;核心竞争力越强。一般来说&#xff0c;看的越多&#xff0c;做的越多&#xff0c;实践出经验才是王道&#xff0c;但是&#xff0c;总有看不…
阅读更多...
智慧物流发展的重要推动力量：北斗卫星导航系统

智慧物流发展的重要推动力量：北斗卫星导航系统

随着经济的快速发展和电商的普及&#xff0c;物流行业的规模不断扩大&#xff0c;对物流运输的效率和安全性也提出了更高的要求。传统的物流运输方式存在着效率低下、信息不对称、安全隐患等问题&#xff0c;因此发展智慧物流已经成为物流行业的必然趋势。智慧物流可以通过先进…
阅读更多...
力扣（LeetCode）算法_C++—— 存在重复元素

力扣（LeetCode）算法_C++—— 存在重复元素

给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;nums …
阅读更多...
立晶半导体Cubic Lattice Inc 专攻音频ADC,音频DAC,音频CODEC,音频CLASS D等CL7016

立晶半导体Cubic Lattice Inc 专攻音频ADC,音频DAC,音频CODEC,音频CLASS D等CL7016

概述&#xff1a; CL7016是一款高保真USB Type-C兼容音频编解码芯片。可以录制和回放有24比特音乐和声音。内置回放通路信号动态压缩&#xff0c; 最大42db录音通路增益&#xff0c;PDM数字麦克风&#xff0c;和立体声无需电容耳机驱动放大器。 5V单电源供电。兼容USB 2.0全速工…
阅读更多...
深度学习面试八股文（2023.9.06持续更新）

深度学习面试八股文（2023.9.06持续更新）

一、优化器 1、SGD是什么&#xff1f; 批梯度下降&#xff08;Batch gradient descent&#xff09;&#xff1a;遍历全部数据集算一次损失函数&#xff0c;计算量开销大&#xff0c;计算速度慢&#xff0c;不支持在线学习。随机梯度下降&#xff08;Stochastic gradient desc…
阅读更多...
C++内存分区

C++内存分区

一、C程序执行时&#xff0c;将内存大方向划分为4个区域 代码区&#xff1a;存放函数体的二进制代码&#xff0c;由操做系统进行管理&#xff1b;全局区&#xff1a;存放全局变量和静态变量以及常量&#xff1b;栈区:由编译器自动分配释放&#xff0c;存放函数的参数值、局部变…
阅读更多...
基于vue-cli创建后台管理系统前端页面——element-ui，axios，跨域配置，布局初步，导航栏

基于vue-cli创建后台管理系统前端页面——element-ui，axios，跨域配置，布局初步，导航栏

目录 引出安装npm install安装element-ui安装axios 进行配置main.js中引入添加jwt前端跨域配置 进行初始布局HomeView.vueApp.vue 新增页面和引入home页面导航栏总结 引出 1.vue-cli创建前端工程&#xff0c;安装element-ui&#xff0c;axios和配置&#xff1b; 2.前端跨域的配…
阅读更多...
最新文章

Copyright @ 2022~2023