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

- 日理万妓 2023-06-27 12:57 7阅读 0赞

vue项目中el-tree 支持横向和纵向滚动条设置，如下所示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

①纵向滚动条容易设置，只需要在el-tree组件中设置height即可  
②横向滚动条稍微复杂，如下代码

<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>

说明：  
（1）在el-tree组件中定义 class元素class=“flow-tree”  
（2）在class 样式中写如下代码即可。

.flow-tree{
            overflow auto;
            flex 1
            height 300px
            margin  10px
            >>>.el-tree-node{
                > .el-tree-node__children{
                    overflow visible !important
                }
            }
        }

其他说明：el-tree 中写的样式中overflow为hidden  
.el-tree-node\_\_children\{  
overflow hidden  
\}  
对overflow的认识：  
定义和用法  
overflow 属性规定当内容溢出元素框时发生的事情。

说明  
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。  
![在这里插入图片描述][20200108105327139.png]  
可能的值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visible 默认值。</td> 
   <td>内容不会被修剪，会呈现在元素框之外。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>内容会被修剪，并且其余内容是不可见的。</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 overflow 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020010710225888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[20200108105327139.png]: https://img-blog.csdnimg.cn/20200108105327139.png