vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table，treeTable

最新推荐文章于 2024-08-09 07:57:13 发布

BeArchitect

最新推荐文章于 2024-08-09 07:57:13 发布

阅读量6.1w

点赞数 8

本文链接：https://blog.csdn.net/s8460049/article/details/61414751

版权

本文档介绍了如何基于vue-cli搭建项目，并整合element-ui，重点讲解了如何制作一个树形table（treeTable）组件。通过1.vue-cli的安装与使用，2.element-ui的集成，3.树形table组件的实现步骤，详细阐述了整个过程。

摘要由CSDN通过智能技术生成

该组件基于技术栈，主要涉及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