该组件基于技术栈，主要涉及vue-cli生成的webpack项目脚手架，在此脚手架项目基础上完成的，整合了element-ui开源vue的UI项目
创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、做网站、旺苍网络推广、小程序开发、旺苍网络营销、旺苍企业策划、旺苍品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供旺苍建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
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 DataTransferutils/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组件的源码
{{scope.row[column.dataIndex]}} 删除
index.js
import TreeGrid from './vue/TreeGrid.vue'
module.exports = {
TreeGrid
}
使用
效果图
https://github.com/sunlandong/treeTable github上下载源码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。