elementui 给tree组件添加滚动条

作者：System 时间：2024年08月27日分类：所有,elementui 字数：690

在Element UI的Tree组件中添加滚动条，可以通过CSS样式来实现。你可以为Tree组件的外部容器设置一个固定高度，并且添加overflow-y: auto样式来自动添加垂直滚动条。

以下是一个简单的示例：

HTML:




<template>
  <el-tree
    :data="data"
    class="custom-tree"
    :props="defaultProps">
  </el-tree>
</template>

CSS:




<style>
.custom-tree {
  height: 400px; /* 设置你需要的高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>

JavaScript:




<script>
export default {
  data() {
    return {
      data: [...], // 你的树形数据
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

在这个例子中，.custom-tree 类被添加到了Tree组件上，并且通过CSS设置了一个固定高度并启用了垂直滚动条。当内容超出这个高度时，滚动条就会出现。

elementui 给tree组件添加滚动条

评论已关闭

推荐阅读