这篇文章主要介绍了vue2.0基于vue-cli+element-ui制作树形treeTable，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
该组件基于技术栈，主要涉及vue-cli生成的webpack项目脚手架，在此脚手架项目基础上完成的，整合了elemen本文来源gaodai$ma#com搞$代*码网2t-ui开源vue的UI项目
1.vue-cli的安装使用
npm install -g vue-cli
全局安装vue-cli之后，使用该脚手架的相关命令，可快速生成一个比较规范的vue项目结构
vue init
例子
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.treeToArray = function (data, parent, level, expandedAll) { let tmp = [] Array.from(data).forEach(function (record) { if (record._expanded === undefined) { Vue.set(record, '_expanded', expandedAll) } if (parent) { Vue.set(record, '_parent', parent) } let _level = 0 if (level !== undefined && level !== null) { _level = level + 1 } Vue.set(record, '_level', _level) tmp.push(record) if (record.children && record.children.length > 0) { let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll) tmp = tmp.concat(children) } }) return tmp } export default DataTransfer
utils/index.js
/* * @Author: sunlandong * @Date: 2017-03-11 12:06:55 * @Last Modified by: sunlandong * @Last Modified time: 2017-03-11 16:36:56 */ import MSDataTransfer from './dataTranslate.js' export default { MSDataTransfer }
TreeGrid.vue是树形table组件的源码
<span class="ms-tree-space"></span><button class="button is-outlined is-primary is-small"> <i class="el-icon-caret-right"></i><i class="el-icon-caret-bottom"></i></button><span class="ms-tree-space"></span> {{scope.row[column.dataIndex]}} <button type="button" class="el-button el-button--default el-button--small"> 编辑 </button> 删除 <button type="button" class="el-button el-button--success el-button--small"> 添加下级树结构 </button> .ms-tree-space{position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; width: 18px; height: 14px;} .ms-tree-space::before{content: ""} table td{ line-height: 26px; }
index.js
import TreeGrid from './vue/TreeGrid.vue' module.exports = { TreeGrid }
使用
<div class="hello"> </div><!-- Add "scoped" attribute to limit CSS to this component only -->
效果图
https://github.com/sunlandong/treeTable github上下载源码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue2.0基于vue-cli+element-ui制作树形treeTable的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue2.0基于vue-cli+element-ui制作树形treeTable
