vue项目中el-tree :横向和纵向滚动条设置

一、方法1:

①纵向滚动条容易设置,只需要在el-tree组件中设置height即可
②横向滚动条稍微复杂,如下代码(或者通过js计算)

<template><div class="tree-scroll"><el-input style="width: 180px;margin-top: 10px"placeholder="输入关键字进行过滤"v-model="filterText"></el-input><el-treeclass="flow-tree":data="data2":props="defaultProps"default-expand-all:filter-node-method="filterNode"ref="tree2"></el-tree></div>
</template><script>export default {name: "TreeScroll",watch: {filterText(val) {this.$refs.tree2.filter(val);}},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;}},data() {return {filterText: '',data2: [{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滚动条滚动条二级 3-2滚动条滚动条'}]}, {id: 4,label: '一级 4',children: [{id: 71,label: '二级 4-1'}, {id: 81,label: '二级 4-2滚动条滚动条二级 3-2滚动条滚动条'}]}, {id: 5,label: '一级 5',children: [{id: 711,label: '二级 5-1'}, {id: 811,label: '二级 5-2滚动条滚动条二级 3-2滚动条滚动条'}]}, {id: 6,label: '一级 6',children: [{id: 7116,label: '二级 5-1'}, {id: 8116,label: '二级 5-2滚动条滚动条二级 3-2滚动条滚动条'}]}],defaultProps: {children: 'children',label: 'label'}};}}
</script><style scoped lang="stylus">.tree-scroll{width 200pxborder 1px solid #E7E7E7height 100%}.flow-tree{overflow autoheight 300pxmargin  10px>>>.el-tree-node{> .el-tree-node__children{overflow visible !important}}}
</style>

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

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

相关文章

界面控件DevExpress WPF Chart组件——拥有超快的数据可视化库!

DevExpress WPF Chart组件拥有超大的可视化数据集&#xff0c;并提供交互式仪表板与高性能WPF图表库。DevExpress Charts提供了全面的2D / 3D图形集合&#xff0c;包括数十个UI定制和数据分析/数据挖掘选项。 PS&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助…

Mysql中插入数据,并返回自增主键的值

创建数据库和表使用 insert into 进行插入数据使用 RETURN_GENERATED_KEYS 进行返回插入的这条数据 具体方法如下&#xff1a; Testvoid addGetPk(){try{Statement stmt conn.createStatement();String sql String.format("insert into t_students values(null,%s,%s,%d…

「已解决」iframe 本地生效 但是在测试环境不生效问题

背景 我有一个表格中一列是个详情&#xff0c;这个详情可被点击&#xff0c;点击后弹出抽屉&#xff0c;抽屉里是后端传给我详情字段的值对应的 url 的 iframe 展示。 问题是&#xff0c;在本地 localhost 下运行&#xff0c;ifame 运行正常&#xff0c;但是部署到测试环境就看…

flutter开发实战-获取Widget的大小及位置

flutter开发实战-获取Widget的大小及位置 最近开发过程中需要获取Widget的大小及位置&#xff0c;这时候就需要使用到了GlobalKey了和WidgetsBinding.instance.addPostFrameCallback了 一、addPostFrameCallback 该函数的作用&#xff1a; flutter中的界面组件Widget每一帧…

十六、遥感影像识别

1、获取遥感影像数据 或用卫星遥感数据,或用无人机低空采集,原始数据加工,最后提供CSV、Excel、GeoTIFF、ENVI等数据文件。 ENVI格式的原始数据文件可以存储多维数据,包括三维数组、二维数组、一维数组甚至标量等。这是因为ENVI格式支持不仅仅是多光谱或高光谱数据…

P1722 矩阵 II

题目背景 usqwedf 改编系列题。 题目描述 如果你在百忙之中抽空看题&#xff0c;请自动跳到第六行。 众所周知&#xff0c;在中国古代算筹中&#xff0c;红为正&#xff0c;黑为负…… 给定一个12n 的矩阵&#xff08;usqwedf&#xff1a;这不是一个 2n 的队列么&#xff…

iOS 开发-编译第三方库 openssl及curl

1、前提 iOS编译库需要三个架构,arm64,arm64e,x86_64&#xff0c;其中x86_64为模拟器所需 iOS编译库需要下载xcode及对应的command line tool&#xff08;执行命令时可以自动下载&#xff09;&#xff0c;下载失败需要去官网搜索下载 2、openssl 参考iOS如何编译OpenSSL静态…

【C++】速识模板(template<class T>)

一、引言 在我们学习C时&#xff0c;常会用到函数重载。而函数重载&#xff0c;通常会需要我们编写较为重复的代码&#xff0c;这就显得臃肿&#xff0c;且效率低下。 重载的函数仅仅只是类型不同&#xff0c;代码的复用率比较低&#xff0c;只要有新类型出现时&#xff0c;就…

王道机组难题分析

第四章 指令系统 大端方式&#xff1a;就是高地址存放高位&#xff0c; LSB的意思是&#xff1a;全称为Least Significant Bit&#xff0c;在二进制数中意为最低有效位 MSB的意思是&#xff1a;全称为Most Significant Bit&#xff0c;在二进制数中属于最高有效位 操作数可以理…

基于改进的长短期神经网络电池电容预测,基于DBN+LSTM+SVM的电池电容预测

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的客电池电容预测 完整代码: 基于长短期神经网络LSTM的公交站客流量预测资源-CSDN文库 https://download.csdn.net/download/abc991835105/88184734 效果图 结果分析 展望 参考论文 背影 为增加电动车行…

JavaWeb-Servlet服务连接器(三)

目录 Response响应对象 1.基本功能 2.重定向 3.路径 4.服务器输出数据到浏览器 Response响应对象 1.基本功能 设置响应行&#xff1a;格式为 HTTP/1.1 200 OK&#xff0c;可以使用 setStatus(int sc) 方法设置状态码为 200 表示成功。 方法名称描述setStatus(int sc)设…

算法模板七月

数学类模板 求组合数模板 求组合数 蓝桥杯集合的分割; static int mod 1000000000 7; static int N 1010; //求static long [][] arrnew long[N][N]; //需要开一个longstatic {for (int i 0; i < N; i) {for (int j 0; j < i; j) {if (j 0) {arr[i][j] 1;} el…

将商城项目放到docker-centos7中

1、docker pull centos:7 2、docker run -d -it --privileged 仓库名称/shopcentos:1.1 /usr/sbin/init 注意&#xff1a; /usr/sbin/init 必须加&#xff0c;否则没法使用systemctl启动mysql 3、安装mysql教程 安装msyql教程&#xff1a;https://blog.csdn.net/davice_li…

docker下载和案例

文章目录 Docker安装一,根据官方文档安装二,根据我以下方式 Docker配置错误导致漏洞一,CRLF注入漏洞介绍在nginx中该漏洞例子解决方法 目录穿越漏洞介绍解决方法 Docker安装 一,根据官方文档安装 官方文档 二,根据我以下方式 docker安装要求&#xff1a; Docker要求Ce…

扑克牌(二分)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 你有n种牌&#xff0c;第i种牌的数目为ci。另外有一种特殊的牌&#xff1a;joker&#xff0c;它的数目是m。你可以用每种牌各一张来组成一套牌&#xff0c;也可以用一张joker和除了某…

用户数据报协议UDP

UDP的格式 载荷存放的是:应用层完整的UDP数据报 报头结构: 源端口号:发出的信息的来源端口目的端口号:信息要到达的目的端口UDP长度:2个字节(16位),即UDP总长度为:2^16bit 2^10bit * 2^6bit 1KB * 64 64KB.所以一个UDP的最大长度为64KBUDP校验和:网络的传输并非稳定传输,…

BIO、NIO、AIO 有什么区别

在Java中&#xff0c;BIO&#xff08;Blocking I/O&#xff09;、NIO&#xff08;Non-blocking I/O&#xff09;和AIO&#xff08;Asynchronous I/O&#xff09;都是用于处理I/O&#xff08;输入/输出&#xff09;操作的不同方式。它们在处理I/O时具有不同的特点和适用场景。 B…

【leetcode】前缀和

内容摘抄自&#xff1a; 小而美的算法技巧&#xff1a;前缀和数组 | labuladong 的算法小抄 一维数组的前缀和 看这个 preSum 数组&#xff0c;若想求索引区间 [1, 4] 内的所有元素之和&#xff0c; 就可以通过 preSum[5] - preSum[1] 得出。 class NumArray {private:// 前缀…

wordpress数据表中标签和分类如何区分?

wordpress中标签和分类是什么关系怎么区分&#xff1f;最后有一个群的网友告诉了我文章ID和标签ID的关系是放在了wp_term_relationships表中&#xff0c;然后我百度了下这个表的结构和相关介绍&#xff0c;发现果然如此&#xff0c;先把文章保存起来&#xff1a; wp_term_rela…

消息中间件 Asio (C++)

折腾了一上午&#xff0c;看到这个结果的时候泪目了兄弟闷&#xff0c;讲真。我的asio客户端成功收到服务端发来的消息了。虽然这确实是极其智障又简单的入门哈哈 下载独立版本 asio网络通信库新建cmake工程&#xff0c;CMakeLists.txt加载asioasio最简单的服务端和客户端代码…