前沿
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比莫力達(dá)網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式莫力達(dá)網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋莫力達(dá)地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。
最近在項(xiàng)目開(kāi)發(fā)中需要做一個(gè)多級(jí)表格，樹(shù)形表格的功能，看看element-ui上沒(méi)有，自己開(kāi)是折騰，話不多說(shuō)，上思路和代碼。
效果圖：
.jpg)
可點(diǎn)擊收縮，展開(kāi)。
一，首先創(chuàng)建一個(gè)公共的文件夾treeTable,里邊放一個(gè)index.vue和eval.js
先看看index.vue，原理就是在element-ui的基礎(chǔ)上做了進(jìn)一步改造。
//利用element-ui的 屬性，在插入多級(jí)表格{{scope.$index}} {{scope.row[column.value]}}
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
}
二，頁(yè)面中的用法
一下為一些整體思路，以及一些說(shuō)明，方便后續(xù)使用
寫(xiě)在前面
此組件僅提供一個(gè)創(chuàng)建TreeTable的解決思路
prop說(shuō)明
data
必填
原始數(shù)據(jù),要求是一個(gè)數(shù)組或者對(duì)象
[{
key1: value1,
key2: value2,
children: [{
key1: value1
},
{
key1: value1
}]
},
{
key1: value1
}]
或者
{
key1: value1,
key2: value2,
children: [{
key1: value1
},
{
key1: value1
}]
}
columns
列屬性,要求是一個(gè)數(shù)組
text: 顯示在表頭的文字
value: 對(duì)應(yīng)data的key。treeTable將顯示相應(yīng)的value
width: 每列的寬度，為一個(gè)數(shù)字(可選)
如果你想要每個(gè)字段都有自定義的樣式或者嵌套其他組件，columns可不提供，直接像在el-table一樣寫(xiě)即可，如果沒(méi)有自定義內(nèi)容，提供columns將更加的便捷方便
如果你有幾個(gè)字段是需要自定義的，幾個(gè)不需要，那么可以將不需要自定義的字段放入columns，將需要自定義的內(nèi)容放入到slot中，詳情見(jiàn)后文
[{
value:string,
text:string,
width:number
},{
value:string,
text:string,
width:number
}]
expandAll
是否默認(rèn)全部展開(kāi)，boolean值，默認(rèn)為false
evalFunc
解析函數(shù)，function，非必須
如果不提供，將使用默認(rèn)的evalFunc
evalArgs
解析函數(shù)的參數(shù)，是一個(gè)數(shù)組
請(qǐng)注意，自定義的解析函數(shù)參數(shù)第一個(gè)為this.data，第二個(gè)參數(shù)為， this.expandAll,你不需要在evalArgs填寫(xiě)。一定記住，這兩個(gè)參數(shù)是強(qiáng)制性的，并且位置不可顛倒 this.data為需要解析的數(shù)據(jù)，this.expandAll為是否默認(rèn)展開(kāi)
如你的解析函數(shù)需要的參數(shù)為(this.data, this.expandAll,1,2,3,4)，那么你只需要將[1,2,3,4]賦值給evalArgs就可以了
如果你的解析函數(shù)參數(shù)只有(this.data, this.expandAll),那么就可以不用填寫(xiě)evalArgs了
slot
這是一個(gè)自定義列的插槽。
默認(rèn)情況下，treeTable只有一行行展示數(shù)據(jù)的功能。但是一般情況下，我們會(huì)要給行加上一個(gè)操作按鈕或者根據(jù)當(dāng)行數(shù)據(jù)展示不同的樣式，這時(shí)我們就需要自定義列了。
slot和columns屬性可同時(shí)存在,columns里面的數(shù)據(jù)列會(huì)在slot自定義列的左邊展示
其他
如果有其他的需求，請(qǐng)參考el-table的api自行修改index.vue
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
