非你网

el-tree 蛮好使用的，就是排版的方向永远都是从上到下。同一级没办法，合向并着展示。那么，想要实现这种效果，就得自己改代码，操作了。

操作一波

vue 中，el-tree 的默认节点和数据如下：

<template>
  <div class="container">
    <el-tree
      ref="tree"
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :default-checked-keys="checkIds"
      :props="defaultProps"/>
    <el-button size="small" @click="getCheckedNodes">获取 checked</el-button>
  </div>
</template>

<script>

export default {
  name: 'el-tree-test',
  data() {
    return {
      data: [],
      checkIds: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    this.data = [
      {
        id: 1,
        label: '喜欢游戏',
        children: [
          {
            id: 2,
            label: '王者荣耀'
          }, {
            id: 3,
            label: '吃鸡'
          }, {
            id: 4,
            label: '英雄联盟'
          }, {
            id: 5,
            label: 'DNF'
          }
        ]
      }, {
        id: 6,
        label: '喜欢语言',
        children: [
          {
            id: 8,
            label: 'PHP'
          }, {
            id: 9,
            label: 'Node.js'
          }, {
            id: 10,
            label: 'Vue'
          }
        ]
      }
    ]

    this.checkIds = [2, 5, 8, 10]
  },
  methods: {
    getCheckedNodes() {
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

el-tree 定义 render-content，方便加入 class。定义 node-expand， 方便在展开的时候处理样式。

    <el-tree
      ref="tree"
      :data="data"
      class="tree-1"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
      :default-checked-keys="checkIds"
      :props="defaultProps"
      :render-content="renderContent"
      @node-expand="handleExpand"/>

处理 renderContent，以及 handleExpand。

…
methods: {
    renderContent(h, { node, data, store }) {
      let classname = ''
      if (node.level === 3) {
        classname = 'tree-item'
      }
      // 由于项目中有二级菜单也有三级菜单，就要在此做出判断。
      if (node.level === 2 && node.childNodes.length === 0) {
        classname = 'tree-item'
      }
      return (
        <div class={classname}>
          {node.label}
        </div>)
    },
    changeCss() {
      var treeItem = document.getElementsByClassName('tree-item')
      for (var i = 0; i < treeItem.length; i++) {
        treeItem[i].parentNode.style.cssFloat = 'left'
        treeItem[i].parentNode.style.styleFloat = 'left'
      }
    },
    handleExpand() {
      this.$nextTick(() => {
        this.changeCss()
      })
    },
    …

还有，在 mounted 中，手动调用一次 handleExpand。

参考

https://blog.csdn.net/weixin_45899022/article/details/104607542