前言

将element ui使用过程中一些常用的组件使用情况记录如下

组件

el-tree树组件

树父子节点成一列显示

没有进行设置之前显示效果

设置之后显示效果
​​​​

主要代码如下

<el-tree
      icon-class="none"
      expand-on-click-node="false"
      style="margin-right: 20px;"
      ref="faultTree"
      :data="faultTree"
      node-key="faultId"
      align="center"
      indent="10px"
      show-checkbox
      :default-expanded-keys="defaultFaultExpandedKeys"
      @check-change="handleFaultCheckChange"
      :props="defaultFaultProps">
 </el-tree>

说明：

    icon-class="none"                        去掉当前控件内左侧的icon图标
    expand-on-click-node="false"      点击控件的根节点不让控件折叠 
    node-key="faultId"                         node-key 属性
    indent="10px"                                相邻级节点间的水平缩进，单位为像素
    show-checkbox                              节点是否可被选择
    :default-expanded-keys="defaultFaultExpandedKeys" 默认展开的节点的 key 的数组，与当前节点的key值一致；

​