VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线_两个el-tree的循环遍历

在Vue中使用element-ui的el-tree组件时，如果需要将子节点横向排列，可以通过自定义节点内容的方式实现。以下是一个简单的例子，展示了如何在el-tree中使用render-content属性来自定义节点渲染，实现横向排列的效果：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :render-content="renderContent"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        // ... 树形数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <span>
          {node.label}
          <span>
            {data.children && data.children.length > 0 ? (
              <i class="el-icon-plus" onClick={() => this.handleExpand(node, store)}></i>
            ) : (
              ''
            )}
          </span>
        </span>
      );
    },
    handleExpand(node, store) {
      store.expanded(node);
    }
  }
};
</script>
 
<style scoped>
.el-tree-node__content {
  display: flex;
  align-items: center;
}
 
.el-tree-node__content > span:last-child {
  margin-left: auto;
}
</style>

在这个例子中，renderContent方法使用了Vue的渲染函数h来创建自定义的节点内容。节点内容包括节点的标签和一个图标，如果节点有子节点，点击图标会展开或折叠子节点。通过CSS样式，我们设置了节点内容的布局为横向排列。