如何用vue-cli和element-ui在vue2.0中构建树形结构treeTable组件？

本文共计1529个文字，预计阅读时间需要7分钟。

该组件基于技术栈，主要包含Vue CLI生成的webpack项目脚手架，在此脚手架基础上完成的，整合了Element UI开源Vue的UI项目。安装使用方法：使用npm全局安装vue-cli，命令为npm install -g vue-cli，安装完成后，直接使用命令Vue即可。

该组件基于技术栈，主要涉及vue-cli生成的webpack项目脚手架，在此脚手架项目基础上完成的，整合了element-ui开源vue的UI项目

1.vue-cli的安装使用

npm install -g vue-cli

全局安装vue-cli之后，使用该脚手架的相关命令，可快速生成一个比较规范的vue项目结构

vue init <template-name> <project-name>

例子

vue init webpack treeTable

这样一个快速的项目结构生成，如下所示，中间一路回车就可以了，主要是设置了是否支持eslint等等

2.整合element-ui

cd treeTable

进入刚刚生成的项目目录中，安装element-ui

npm i element-ui -S

在main.js中，

import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)

整合就可以了，具体element-ui更多的使用和操作，可以去官网查看element.eleme.io/#/zh-CN/component/quickstart
我这里主要是利用他的table组件来制作一个树形结构的table。