在vue项目中使用elementUI组件的树组件,当树节点的数据过多则需要增加纵向滚动条,如果节点的内容过长则需要设置横向滚动条,那么css中应该怎样实现呢?下面就是一个树节点内容溢出增加横纵向滚动条的实例
1、HTML中
<template>
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]">
</el-tree>
</template>
2、script中
<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>
3、css中
<style scoped lang="less">
.video-tree{
width: 100px;
height: 200px;
padding:10px 0;
box-sizing: border-box;
/*设置纵向滚动条、横向滚动条要配合下面的.el-tree-node的样式才能实现*/
overflow: scroll;
>.el-tree{
>.el-tree-node{
/*设置横向滚动条*/
min-width: 100%;
display: inline-block;
/*设置根节点隐藏*/
>.el-tree-node__content{
display: none;
}
}
}
}
</style>