前沿
最近在項目開發中需要做一個多級表格，樹形表格的功能，看看element-ui上沒有，自己開是折騰，話不多說，上思路和代碼。
效果圖：
可點擊收縮，展開。
一，首先創建一個公共的文件夾treeTable,里邊放一個index.vue和eval.js
先看看index.vue，原理就是在element-ui的基礎上做了進一步改造。
//利用element-ui的 <template slot-scope="scope">屬性，在插入多級表格<template> <el-table :data="formatData" :row-style="showRow" v-bind="$attrs"> <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></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 } }, 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) } }, methods: { showRow: function(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: function(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: #2196F3; $space-width: 18px; .ms-tree-space { position: relative; top: 1px; display: inline-block; font-style: normal; font-weight: 400; line-height: 1; width: $space-width; height: 14px; &::before { content: "" } } .processContainer{ width: 100%; height: 100%; } table td { line-height: 26px; } .tree-ctrl{ position: relative; cursor: pointer; color: $color-blue; margin-left: -$space-width; }</style>eval.js
/** * @Author: hyf * @Date: 2018-10-27 */'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}二，頁面中的用法
<template> <div class="app-container"> <tree-table :data="data" :columns="columns" border></tree-table> </div></template><script>import treeTable from '@/components/TreeTable'export default { name: 'treeTableDemo', components: { treeTable }, data() { return { columns: [ { text: '事件', value: 'event', width: 200 }, { text: 'ID', value: 'id' }, { text: '時間線', value: 'timeLine' }, { text: '備注', value: 'comment' } ], data: [ { id: 0, event: '事件1', timeLine: 50, comment: '無' }, { id: 1, event: '事件1', timeLine: 100, comment: '無', children: [ { id: 2, event: '事件2', timeLine: 10, comment: '無' }, { id: 3, event: '事件3', timeLine: 90, comment: '無', children: [ { id: 4, event: '事件4', timeLine: 5, comment: '無' }, { id: 5, event: '事件5', timeLine: 10, comment: '無' }, { id: 6, event: '事件6', timeLine: 75, comment: '無', children: [ { id: 7, event: '事件7', timeLine: 50, comment: '無', children: [ { id: 71, event: '事件71', timeLine: 25, comment: 'xx' }, { id: 72, event: '事件72', timeLine: 5, comment: 'xx' }, { id: 73, event: '事件73', timeLine: 20, comment: 'xx' } ] }, { id: 8, event: '事件8', timeLine: 25, comment: '無' } ] } ] } ] } ] } }}</script>一下為一些整體思路，以及一些說明，方便后續使用
寫在前面
此組件僅提供一個創建TreeTable的解決思路
prop說明
data
必填
原始數據,要求是一個數組或者對象
[{ key1: value1, key2: value2, children: [{ key1: value1 }, { key1: value1 }] }, { key1: value1 }]或者
{ key1: value1, key2: value2, children: [{ key1: value1 }, { key1: value1 }] }columns
列屬性,要求是一個數組
text: 顯示在表頭的文字
value: 對應data的key。treeTable將顯示相應的value
width: 每列的寬度，為一個數字(可選)
如果你想要每個字段都有自定義的樣式或者嵌套其他組件，columns可不提供，直接像在el-table一樣寫即可，如果沒有自定義內容，提供columns將更加的便捷方便
如果你有幾個字段是需要自定義的，幾個不需要，那么可以將不需要自定義的字段放入columns，將需要自定義的內容放入到slot中，詳情見后文
[{ value:string, text:string, width:number},{ value:string, text:string, width:number}]expandAll
是否默認全部展開，boolean值，默認為false
evalFunc
解析函數，function，非必須
如果不提供，將使用默認的evalFunc
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了
slot
這是一個自定義列的插槽。
默認情況下，treeTable只有一行行展示數據的功能。但是一般情況下，我們會要給行加上一個操作按鈕或者根據當行數據展示不同的樣式，這時我們就需要自定義列了。
slot和columns屬性可同時存在,columns里面的數據列會在slot自定義列的左邊展示
其他
如果有其他的需求，請參考el-table的api自行修改index.vue
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
