vue2.0 + vue-cli + element-ui：详解树形table实现

本文将详细介绍如何使用Vue 2.0结合vue-cli和element-ui创建一个树形treeTable组件。首先，我们回顾一下vue-cli的基础安装与项目结构生成。vue-cli是一个用于构建Vue项目的脚手架工具，全局安装后，通过`vue init <template-name> <project-name>`命令可以快速创建一个结构规范的项目，比如`vue init webpack treeTable`，这将自动生成包含ESLint支持等配置的项目模板。 接着，文章重点介绍如何在已生成的vue-cli项目中整合element-ui。element-ui是一个基于Vue的开源UI组件库，提供了丰富的组件和样式。在项目目录下执行`npm install element-ui`安装element-ui，然后在`main.js`文件中引入并注册ElementUI，以便在项目中使用。官网（http://element.eleme.io/#/zh-CN/component/quickstart）是学习element-ui更深入使用的好资源。 对于树形table的实现，文章提到在src/components目录下的`dataTranslate.js`文件中，作者自定义了一个函数，用于将数组数据转换为树形结构，并添加必要的属性。这个函数可能使用递归或者其他数据处理技术，将每个对象的parent-child关系表示出来，以便在table中展示出层次分明的树状结构。 在`index.js`中，开发者会编写实际的treeTable组件，包括HTML模板、数据绑定、事件监听以及可能的用户交互逻辑，如点击节点展开或折叠子节点等。同时，元素如table列、树形图标、父子节点关联等都是在这个组件里实现的。 总结来说，这篇文章提供了从基础的项目搭建到具体组件开发的完整步骤，对于希望在Vue 2.0项目中使用element-ui构建树形表格的开发者来说，是一个实用且详尽的教程。通过阅读和实践，读者可以掌握如何在vue-cli环境中集成element-ui，并应用到实际的树形数据展示场景中。