Vue2.0自定义权限树组件：从Element-UI三级到四级横向布局实现

在Vue2.0项目中，使用饿了么的Element-UI库构建了一个自定义权限树组件，以解决特定的业务需求。初始情况下，项目依赖Element-UI的树形控件`<el-tree>`来实现三级权限结构，这提供了基础的展示功能。然而，随着新需求的出现，需要将权限扩展到四级，并且改变布局方式，使其表现为横向，同时操作按钮的权限不再固定于四级结构，但要求样式保持一致性。 起初，开发者尝试修改Element-UI的tree控件源码来适应这些变化，但由于缺乏有效的编译方法，这种方法未能成功。因此，他们选择放弃修改第三方库，转而自行开发组件以满足个性化需求。组件设计的关键部分包括： 1. **模板部分**: - 使用`<li>`元素作为列表项，根据`model.menuLevel`判断是否显示折叠或展开的图标，通过`v-show`指令控制节点的可见性。 - 当前节点如果是文件（`isFolder`为`false`），则显示文件图标；如果是目录（`isFolder`为`true`），则包含一个递归调用的子菜单`<tree-menu>`，用于渲染子节点。 - 每个节点都有一个复选框，通过`@click`事件处理用户的选择，`v-model`绑定到单个节点的`model`实例。 - 利用CSS类名管理样式，如`isButton`和`hasBorder`，以及根据`open`状态调整折叠/展开的样式。 2. **脚本部分**: - 引入jQuery库，可能用于某些特定的交互逻辑或者辅助功能。 - 定义一个名为`tree`的组件，包含名称属性`name`，并导出组件配置，其中包含了模板引用、数据绑定、事件处理等逻辑。 为了实现横向布局，开发者可能需要动态调整`ul`元素的宽度，或者使用Flexbox或Grid布局来管理子节点的展示。由于样式稍差，可能需要在后期进行优化，提升组件的美观度和用户体验。 总结来说，这个Vue2.0权限树组件的实现主要涉及到组件化开发、数据驱动的模板渲染、递归结构的处理，以及灵活运用CSS或现代布局技术来满足多层级权限和横向布局的需求。通过自定义组件，开发者能够更好地适应项目中的特殊业务场景，同时也锻炼了对Vue框架和Element-UI库的深入理解。