该组件基于技术栈,主要涉及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更多的使用和操作,可以去官网查看 http://element.eleme.io/#/zh-CN/component/quickstart
我这里主要是利用他的table组件来制作一个树形结构的table。
3.树形table组件制作
在src目录的components目录中,
其中utils下面提供一些需要用的工具类
vue目录下面是组件的源码
index.js是外包入口
相关代码
dataTranslate.js主要是提供了把数组数据转换成树形结构的数据,并且进行相关属性的添加
/*
* @Author: sunlandong
* @Date: 2017-03-11 12:06:49
* @Last Modified by: sunlandong
* @Last Modified time: 2017-03-11 16:30:03
*/
import Vue from 'vue'
function DataTransfer (data) {
if (!(this instanceof DataTransfer)) {
return new DataTransfer(data, null, null)
}
}
DataTransfer.tre