該組件基于技術(shù)棧，主要涉及vue-cli生成的webpack項(xiàng)目腳手架，在此腳手架項(xiàng)目基礎(chǔ)上完成的，整合了element-ui開源vue的UI項(xiàng)目
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、做網(wǎng)站、旺蒼網(wǎng)絡(luò)推廣、小程序開發(fā)、旺蒼網(wǎng)絡(luò)營銷、旺蒼企業(yè)策劃、旺蒼品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供旺蒼建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
1.vue-cli的安裝使用
npm install -g vue-cli
全局安裝vue-cli之后，使用該腳手架的相關(guān)命令，可快速生成一個(gè)比較規(guī)范的vue項(xiàng)目結(jié)構(gòu)
vue init
例子
vue init webpack treeTable
這樣一個(gè)快速的項(xiàng)目結(jié)構(gòu)生成，如下所示，中間一路回車就可以了，主要是設(shè)置了是否支持eslint等等
2.整合element-ui
cd treeTable
進(jìn)入剛剛生成的項(xiàng)目目錄中，安裝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更多的使用和操作，可以去官網(wǎng)查看 http://element.eleme.io/#/zh-CN/component/quickstart
我這里主要是利用他的table組件來制作一個(gè)樹形結(jié)構(gòu)的table。
3.樹形table組件制作
在src目錄的components目錄中，
其中utils下面提供一些需要用的工具類
vue目錄下面是組件的源碼
index.js是外包入口
相關(guān)代碼
dataTranslate.js主要是提供了把數(shù)組數(shù)據(jù)轉(zhuǎn)換成樹形結(jié)構(gòu)的數(shù)據(jù)，并且進(jìn)行相關(guān)屬性的添加
重慶分公司
重慶分公司
/*
* @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上下載源碼
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
