vue中使用Ement-UI 的 Tree 树形控件及样式修改

vue中使用Ement-UI 的 Tree 树形控件及样式修改

在写项目中是用到了三级分类菜单使用了element-ui的tree组件心得给大家分享一下

<div class="over">
  <el-tree
    class="tree" //样式类名
    :data="data" //数据
    show-checkbox  //节点是否可被选择
    iodent="0" //注意设置：  :indent="0"，否则节点会出现较大缩进
    default-expand-all //是否默认展开所有节点
    node-key="id" //每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
    ref="tree"
    highlight-current //是否高亮当前选中节点，默认值是 false。
    :props="defaultProps" //配置选项 --- 子类名称
    :render-content="renderContent"  //树节点的内容区的渲染 Function
    @node-expand="handleExpand" //节点被展开时触发的事件
  ></el-tree>
</div>

  data() {
    return {
      //数据
      data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }],
       //展示匹配的字段
      defaultProps: {
        children: "children", //子类的名称
        label: "label", //接口返回文字的字段
      },
     }
   }

展示样式

如果出现多个二级菜单和三级菜单会显示样式很乱,下来我们来给树形添加指示线

注意一点 over是tree父容器的class name，通过此方法设置tree的根节点样式

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}