vue elementui实现机构树

实现机构树的基本思路

使用 Vue 和 ElementUI 实现机构树，主要依赖 ElementUI 的 el-tree 组件。机构树通常展示层级关系数据，支持展开、折叠、选中等交互功能。

安装 ElementUI

确保项目中已安装 ElementUI。若未安装，可以通过以下命令安装：

npm install element-ui -S

在 main.js 中引入 ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

数据结构准备

机构树的数据通常为嵌套结构，每个节点包含 label（显示文本）、children（子节点）等属性。示例数据如下：

treeData: [
  {
    label: '一级机构',
    children: [
      {
        label: '二级机构1',
        children: [
          { label: '三级机构1' },
          { label: '三级机构2' }
        ]
      },
      {
        label: '二级机构2',
        children: [
          { label: '三级机构3' }
        ]
      }
    ]
  }
]

使用 el-tree 组件

在 Vue 模板中使用 el-tree 组件绑定数据：

<template>
  <div>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

配置 props 以指定数据结构的字段名：

data() {
  return {
    treeData: [...], // 机构树数据
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  };
}

处理节点点击事件

通过 @node-click 事件监听节点点击，并获取当前节点数据：

methods: {
  handleNodeClick(data) {
    console.log('点击节点:', data);
  }
}

自定义节点内容

如果需要自定义节点显示内容，可以使用 scoped slot：

<el-tree :data="treeData" :props="defaultProps">
  <span slot-scope="{ node, data }" class="custom-node">
    <span>{{ node.label }}</span>
    <span v-if="node.level === 1" class="custom-tag">一级机构</span>
  </span>
</el-tree>

添加复选框支持

通过 show-checkbox 属性启用复选框：

<el-tree
  :data="treeData"
  :props="defaultProps"
  show-checkbox
  @check-change="handleCheckChange"
></el-tree>

监听复选框变化事件：

methods: {
  handleCheckChange(data, checked, indeterminate) {
    console.log('节点选中状态变化:', data, checked, indeterminate);
  }
}

动态加载节点数据

对于大型机构树，可以通过 lazy 和 load 方法动态加载子节点：

<el-tree
  :props="defaultProps"
  :load="loadNode"
  lazy
></el-tree>

实现 loadNode 方法：

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      // 加载根节点
      resolve([{ label: '一级机构', isLeaf: false }]);
    } else {
      // 根据 node.data 加载子节点
      setTimeout(() => {
        resolve([
          { label: '二级机构1', isLeaf: false },
          { label: '二级机构2', isLeaf: true }
        ]);
      }, 500);
    }
  }
}

样式调整

通过 CSS 自定义树形结构的样式：

.custom-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
.custom-tag {
  background: #f0f2f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

完整示例代码

以下是一个完整的 Vue 组件示例：

<template>
  <div>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
      show-checkbox
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级机构',
          children: [
            {
              label: '二级机构1',
              children: [
                { label: '三级机构1' },
                { label: '三级机构2' }
              ]
            },
            {
              label: '二级机构2',
              children: [
                { label: '三级机构3' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log('点击节点:', data);
    }
  }
};
</script>

通过以上步骤，可以快速实现一个功能完整的机构树组件，支持交互和动态数据加载。