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

这篇具有很好参考价值的文章主要介绍了vue项目中el-tree :横向和纵向滚动条设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、方法1:

①纵向滚动条容易设置,只需要在el-tree组件中设置height即可
②横向滚动条稍微复杂,如下代码(或者通过js计算)文章来源地址https://www.toymoban.com/news/detail-637400.html

<template>
    <div class="tree-scroll">
        <el-input style="width: 180px;margin-top: 10px"
                placeholder="输入关键字进行过滤"
                v-model="filterText">
        </el-input>

        <el-tree
                class="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 200px
        border 1px solid #E7E7E7
        height 100%
    }

    .flow-tree{
        overflow auto
        height 300px
        margin  10px

        >>>.el-tree-node{
            > .el-tree-node__children{
                overflow visible !important
            }
        }
    }
</style>

到了这里,关于vue项目中el-tree :横向和纵向滚动条设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件

    有时遇到一些需求就是在使用树形控件时,服务端并没有一次性返回所有数据,而是返回首层节点列表。然后点击展开首层节点中的某个节点,再去请求该节点的子节点列表,那么就得用上懒加载的机制了。在此以ElementPlus的树形控件为例,实现一个具有懒加载的树形控件的

    2024年02月06日
    浏览(65)
  • vue + elementui 中 在弹框中使用了 tree型结构(<el-tree></el-tree>),点击关闭按钮按钮重置tree

    vue 项目中使用了element-ui 中 tree,选择了懒加载的模式 通过点击按钮,使得 tree 重新加载 通过点击重置按钮,使得tree 重新加载 解决的思路为:通过v-if 的显示隐藏来控制重新加载

    2024年02月12日
    浏览(52)
  • Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能

    (1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据         重点: handleNodeClick方法、getTreeNode方法 (2) 选择el-breadcrumb-item设置el-tree节点选中             必须设置属性: current-node-key=\\\"currentNodeKey\\\"  、 node-key=\\\"id\\\"           重点: 设置树节点渲染 this.$refs.tree.set

    2024年02月16日
    浏览(51)
  • vue:el-tree 实现动态初始默认选中和全选

    官网链接:Element - The world\\\'s most popular Vue UI framework 涉及:1. 树结构转换一维数组             2. 与全选关联            3. 父子组件间传值      大家可以参考官网文档,写的还是挺清楚的。

    2024年02月12日
    浏览(44)
  • element-ui el-tree 设置指定级别节点显示复选框el-checkbox

            /deep/ .el-tree {         padding-top: 15px;         padding-left: 10px;         // 不可全选样式         .el-tree-node {           .is-leaf + .el-checkbox .el-checkbox__inner {             display: inline-block;           }           .el-checkbox .el-checkbox__inner {             display: none;    

    2023年04月08日
    浏览(63)
  • 【el-tree查询并高亮】vue使用el-tree组件,搜索展开并选中对应节点,高亮搜索的关键字,过滤后高亮关键字,两种方法

    效果图这样的,会把所有的有这些的节点都展开 代码: 这里的逻辑就是通过递归循环把所有和匹配的节点筛选出来 然后通过setCheckedKeys方法把他展开选中 然后通过filterReal把高亮标蓝 这个是用的官方文档的那个过滤方式,可以参考官方文档看一下。 只不

    2024年02月15日
    浏览(74)
  • 自定义el-tree复选框选中状态vue elementUI

    :check-strictly属性:该属性默认false,表示严格遵循父子相互关联。父子相互关联(即选中父节点其所有子节点全部选中,取消选中父节点其子节点全部取消,且折叠、展开状态都一样)。 Attributes属性 参数 说明 类型 可选值 默认值 check-strictly 在显示复选框的情况下,是否严格

    2023年04月09日
    浏览(41)
  • vue3+elementPlus:前端自定义el-tree图标icon

    重点:template蒙版下svg和use,然后前端遍历添加key和value,取判断放图标 HTML结构:el-tree里面包裹template(关键点) 方法一:使用for循环 for循环数据,前端自定义tree图标第一种方法,后端key没有icon字段,自己添加 方法二: 使用map遍历 直接map遍历前端自定义tree图标 作者上一

    2024年02月15日
    浏览(46)
  • vue2+element-ui el-tree树形控件封装

    1.封装 根据官网配置项封装了下el-tree 方便维护和复用,有用的话点赞收藏叭~ 2.使用 如若要对不同的一级二级节点设置不同的样式可以参考这样:

    2024年02月12日
    浏览(65)
  • vue-treeselect及el-tree点击节点获取上级节点的数据

    打印这个Node,如下: 展开parent 这个parent就是父节点,父节点中还包含了它自己的父节点,如果无父节点,返回null el-tree获取父节点还是挺简单的,树组件内部已经返给你了,直接获取就行 把树数据源,节点的父id传进来 //用当前项的id和父id对比是因为,当前项的父id即父节

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包