ELement-UI之樹形表格（treeTable&&treeGrid）

Vue WebKit · 發表 2018-11-28 16:07:00

摘要：先上圖來一波支援無限層級，支援新增子級時自動開啟父級，支援編輯時自動開啟父級，執行操作時自帶動畫效果，支援初始化時設定全部開啟或者關閉，支援一鍵展開與關閉絲滑般的無延遲由於基於el-table擴充套件的，所以當然能夠使用el-table的所有功能下面上程式碼： ...

先上圖來一波

支援無限層級，支援新增子級時自動開啟父級，支援編輯時自動開啟父級，執行操作時自帶動畫效果，支援初始化時設定全部開啟或者關閉，支援一鍵展開與關閉絲滑般的無延遲

由於基於el-table擴充套件的，所以當然能夠使用el-table的所有功能

下面上程式碼：

1，核心JS，格式化資料來源

'use strict'
import Vue from 'vue'
export default function treeToArray(data, expandAll, parent = null, level = null) {
let tmp = []
Array.from(data).forEach(function(record) {
if (record._expanded === undefined) {
Vue.set(record, '_expanded', expandAll)
}
let _level = 1
if (level !== undefined && level !== null) {
_level = level + 1
}
Vue.set(record, '_level', _level)
// 如果有父元素
if (parent) {
Vue.set(record, 'parent', parent)
}
tmp.push(record)
if (record.children && record.children.length > 0) {
const children = treeToArray(record.children, expandAll, record, _level)
tmp = tmp.concat(children)
}
})
return tmp
}

2，擴充套件el-table

<template>
<div>
<el-table :data="formatData" :row-style="showRow" v-bind="$attrs" @row-click="singleClick"
style="width: 100%;height: 700px;overflow: hidden" tooltip-effect="dark"
>
<el-table-column v-if="columns.length===0" width="150">
<template slot-scope="scope">
<span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
<span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
<i v-else class="el-icon-minus"></i>
</span>
{{scope.$index}}
</template>
</el-table-column>
<el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text"
:width="column.width">
<template slot-scope="scope">
<span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
<span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
<i v-else class="el-icon-minus"></i>
</span>
{{scope.row[column.value]}}
</template>
</el-table-column>
<slot></slot>
</el-table>
</div>
</template>

<script>

import treeToArray from './eval'

export default {
name: 'treeTable',
props: {
data: {
type: [Array, Object],
required: true
},
columns: {
type: Array,
default: () => []
},
evalFunc: Function,
evalArgs: Array,
expandAll: {
type: Boolean,
default: false
},
singleClick: Function,
},
computed: {
// 格式化資料來源
formatData: function () {
let tmp;
if (!Array.isArray(this.data)) {
tmp = [this.data]
} else {
tmp = this.data
}
const func = this.evalFunc || treeToArray;
const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll];
return func.apply(null, args)//賦值function裡前兩位值data與expandAll
},
},
methods: {
showRow(row) {
const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true);
row.row._show = show;
return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
},
// 切換下級是否展開
toggleExpanded(trIndex) {
const record = this.formatData[trIndex]
record._expanded = !record._expanded
},
// 圖示顯示
iconShow(index, record) {
return (index === 0 && record.children && record.children.length > 0)
},

}
}
</script>
<style rel="stylesheet/css">
@keyframes treeTableShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-webkit-keyframes treeTableShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
/*$color-blue:*/
/*$space-width: */
.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: 18px;
height: 14px;

&
::before {
content: ""
}

}
.processContainer {
width: 100%;
height: 100%;
}

table td {
line-height: 26px;
}

.tree-ctrl {
position: relative;
cursor: pointer;
color: #2196F3;
margin-left: -18px;
}

.el-table__body tr.current-row > td {
background: rgba(185, 221, 249, .75) !important;
}
</style>

3,ReadMe(說明文件)

## 寫在前面
此元件僅提供一個建立TreeTable的解決思路

## prop說明
#### *data*
**必填**

原始資料,要求是一個數組或者物件
```javascript
[{
key1: value1,
key2: value2,
children: [{
key1: value1
},
{
key1: value1
}]
},
{
key1: value1
}]
```
或者
 ```javascript
{
key1: value1,
key2: value2,
children: [{
key1: value1
},
{
key1: value1
}]
}
```

#### columns
列屬性,要求是一個數組

1. text: 顯示在表頭的文字
2. value: 對應data的key。treeTable將顯示相應的value
3. width: 每列的寬度，為一個數字(可選)

如果你想要每個欄位都有自定義的樣式或者巢狀其他元件，columns可不提供，直接像在el-table一樣寫即可，如果沒有自定義內容，提供columns將更加的便捷方便

如果你有幾個欄位是需要自定義的，幾個不需要，那麼可以將不需要自定義的欄位放入columns，將需要自定義的內容放入到slot中，詳情見後文
```javascript
[{
value:string,
text:string,
width:number
},{
value:string,
text:string,
width:number
}]
```

#### expandAll
是否預設全部展開，boolean值，預設為false

#### evalFunc
解析函式，function，非必須

如果不提供，將使用預設的[evalFunc](./eval.js)

如果提供了evalFunc,那麼會用提供的evalFunc去解析data，並返回treeTable渲染所需要的值。如何編寫一個evalFunc，請參考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)

#### evalArgs
解析函式的引數，是一個數組

**請注意，自定義的解析函式引數第一個為this.data，第二個引數為， this.expandAll,你不需要在evalArgs填寫。一定記住，這兩個引數是強制性的，並且位置不可顛倒** *this.data為需要解析的資料，this.expandAll為是否預設展開*

如你的解析函式需要的引數為`(this.data, this.expandAll,1,2,3,4)`，那麼你只需要將`[1,2,3,4]`賦值給`evalArgs`就可以了

如果你的解析函式引數只有`(this.data, this.expandAll)`,那麼就可以不用填寫evalArgs了

具體可參考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)的函式引數和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)的`evalArgs`屬性值

 ## slot
 這是一個自定義列的插槽。
 
 預設情況下，treeTable只有一行行展示資料的功能。但是一般情況下，我們會要給行加上一個操作按鈕或者根據當行資料展示不同的樣式，這時我們就需要自定義列了。請參考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)，[例項效果](http://panjiachen.github.io/vue-element-admin/#/example/table/custom-tree-table)
 
 `slot`和`columns屬性`可同時存在,columns裡面的資料列會在slot自定義列的左邊展示

 ## 其他
如果有其他的需求，請參考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue

4，使用

一：賦值列（如果需要自定義列，直接在元件裡寫自定義的列，跟平時寫el-table一樣）

二：想要在父元件中使用el-table方法，直接在擴充套件的el-table加上事件並在props宣告：

三：增加擴充套件

1：一鍵展開與關閉，由於擴充套件的el-table裡是通過屬性_expanded控制每級展開或關閉，所以通過遞迴修改資料來源即可實現全部展開與關閉

2：對其進行增刪改時，展開指定行（預設進行操作時全部關閉或者展開）

思路：還是通過修改資料來源，對其父級進行展開即可（可以按需判斷執行更細膩的操作），這裡的程式碼就不貼了（需求不一樣）

這裡有一個坑，展開的程式碼放在重新整理頁面獲取新資料的方法裡，只不過這裡要先通過展開的方法修改請求回來的資料來源，然後再賦值頁面，，如果相反，頁面會發生卡死（有些事件無法點選使用）的意外

原作者：

https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable
本人在其進行擴充套件 提供一種思路，不喜勿噴！！！！ 歡迎進群學習交流（927465926）

ELement-UI之樹形表格（treeTable&&treeGrid）

您可能也會喜歡…