vue2.0基于vue-cli+element-ui制作樹形treeTable
更新時間：2019年04月30日 11:14:53 作者：BeArchitect
這篇文章主要介紹了vue2.0基于vue-cli+element-ui制作樹形treeTable，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
該組件基于技術棧，主要涉及vue-cli生成的webpack項目腳手架，在此腳手架項目基礎上完成的，整合了element-ui開源vue的UI項目
1.vue-cli的安裝使用
npm install -g vue-cli
全局安裝vue-cli之后，使用該腳手架的相關命令，可快速生成一個比較規(guī)范的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.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組件的源碼
<template>
<el-table
:data="data"
border
style="width: 100%"
:row-style="showTr">
<el-table-column v-for="(column, index) in columns" :key="column.dataIndex"
:label="column.text">
<template scope="scope">
<span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
<button class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
<i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
</button>
<span v-else-if="index===0" class="ms-tree-space"></span>
{{scope.row[column.dataIndex]}}
</template>
</el-table-column>
<el-table-column label="操作" v-if="treeType === 'normal'" width="260">
<template scope="scope">
<button type="button" class="el-button el-button--default el-button--small">
<router-link
:to="{ path: requestUrl + 'edit', query: {id: scope.row.Oid} }"
tag="span">
編輯
</router-link>
</button>
<el-button
size="small"
type="danger"
@click="handleDelete()">
刪除
</el-button>
<button type="button" class="el-button el-button--success el-button--small">
<router-link :to="{ path: requestUrl, query: {parentId: scope.row.parentOId} }"
tag="span">
添加下級樹結構
</router-link>
</button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import Utils from '../utils/index.js'
// import Vue from 'vue'
export default {
name: 'tree-grid',
props: {
// 該屬性是確認父組件傳過來的數據是否已經是樹形結構了，如果是，則不需要進行樹形格式化
treeStructure: {
type: Boolean,
default: function () {
return false
}
},
// 這是相應的字段展示
columns: {
type: Array,
default: function () {
return []
}
},
// 這是數據源
dataSource: {
type: Array,
default: function () {
return []
}
},
// 這個作用是根據自己需求來的，比如在操作中涉及相關按鈕編輯，刪除等，需要向服務端發(fā)送請求，則可以把url傳過來
requestUrl: {
type: String,
default: function () {
return ''
}
},
// 這個是是否展示操作列
treeType: {
type: String,
default: function () {
return 'normal'
}
},
// 是否默認展開所有樹
defaultExpandAll: {
type: Boolean,
default: function () {
return false
}
}
},
data () {
return {}
},
computed: {
// 格式化數據源
data: function () {
let me = this
if (me.treeStructure) {
let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
console.log(data)
return data
}
return me.dataSource
}
},
methods: {
// 顯示行
showTr: function (row, index) {
let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
row._show = show
return show ? '' : 'display:none;'
},
// 展開下級
toggle: function (trIndex) {
let me = this
let record = me.data[trIndex]
record._expanded = !record._expanded
},
// 顯示層級關系的空格和圖標
spaceIconShow (index) {
let me = this
if (me.treeStructure && index === 0) {
return true
}
return false
},
// 點擊展開和關閉的時候，圖標的切換
toggleIconShow (index, record) {
let me = this
if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
return true
}
return false
},
handleDelete () {
this.$confirm('此操作將永久刪除該記錄, 是否繼續(xù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
this.$message({
type: 'success',
message: '刪除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
})
})
}
}
}
</script>
<style scoped>
.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;
}
</style>
index.js
import TreeGrid from './vue/TreeGrid.vue'
module.exports = {
TreeGrid
}
使用
<template>
<div class="hello">
<tree-grid :columns="columns" :tree-structure="true" :data-source="dataSource"></tree-grid>
</div>
</template>
<script>
import {TreeGrid} from './treeTable'
export default {
name: 'hello',
data () {
return {
columns: [
{
text: '姓名',
dataIndex: 'name'
},
{
text: '年齡',
dataIndex: 'age'
},
{
text: '性別',
dataIndex: 'sex'
}
],
dataSource: [
{
id: 1,
parentId: 0,
name: '測試1',
age: 18,
sex: '男',
children: [
{
id: 2,
parentId: 1,
name: '測試2',
age: 22,
sex: '男'
}
]
},
{
id: 3,
parentId: 0,
name: '測試3',
age: 23,
sex: '女',
children: [
{
id: 4,
parentId: 3,
name: '測試4',
age: 22,
sex: '男'
},
{
id: 5,
parentId: 3,
name: '測試5',
age: 25,
sex: '男'
},
{
id: 6,
parentId: 3,
name: '測試6',
age: 26,
sex: '女',
children: [
{
id: 7,
parentId: 6,
name: '測試7',
age: 27,
sex: '男'
}
]
}
]
},
{
id: 18,
parentId: 0,
name: '測試8',
age: 18,
sex: '男'
}
]
}
},
components: {
TreeGrid
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果圖
https://github.com/sunlandong/treeTable github上下載源碼
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue踩坑之Vue?Watch方法不能監(jiān)聽到數組或對象值的改變詳解
Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動:偵聽屬性,下面這篇文章主要給大家介紹了關于Vue踩坑之Vue?Watch方法不能監(jiān)聽到數組或對象值的改變的相關資料,需要的朋友可以參考下2022-04-04
vue中經常使用到和這類表單元素,vue對于這些元素的數據綁定和我們以前經常用的jQuery有些區(qū)別,下面這篇文章主要給大家介紹了關于vue?v-model的相關資料,需要的朋友可以參考下2022-04-04
vue3使用別名報錯問題的解決辦法(vetur插件報錯問題)
最近在寫一個購物網站使用vue,使用中遇到了問題,下面這篇文章主要給大家介紹了關于vue3使用別名報錯問題的解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue實現鼠標懸浮框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了Vue?數據綁定事件綁定樣式綁定語法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要給大家介紹了關于vue上傳圖片文件的相關資料，介紹了利用原始input標簽form表單上傳、elementui自帶的el-upload上傳以及elementui實現一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了關于vue項目proxyTable配置和部署服務器的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了關于Vue的路由權限管理的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
本文通過實例代碼給大家介紹了Vue隱藏顯示、只讀功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07