前沿
創(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ō),上思路和代碼。
效果圖:
可點(diǎn)擊收縮,展開(kāi)。
一,首先創(chuàng)建一個(gè)公共的文件夾treeTable,里邊放一個(gè)index.vue和eval.js
先看看index.vue,原理就是在element-ui的基礎(chǔ)上做了進(jìn)一步改造。
//利用element-ui的 <template slot-scope="scope">屬性,在插入多級(jí)表格 <template> <el-table :data="formatData" :row- 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: { // 格式化數(shù)據(jù)源 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;' }, // 切換下級(jí)是否展開(kāi) toggleExpanded: function(trIndex) { const record = this.formatData[trIndex] record._expanded = !record._expanded }, // 圖標(biāo)顯示 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 }
二,頁(yè)面中的用法
<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: '時(shí)間線', value: 'timeLine' }, { text: '備注', value: 'comment' } ], data: [ { id: 0, event: '事件1', timeLine: 50, comment: '無(wú)' }, { id: 1, event: '事件1', timeLine: 100, comment: '無(wú)', children: [ { id: 2, event: '事件2', timeLine: 10, comment: '無(wú)' }, { id: 3, event: '事件3', timeLine: 90, comment: '無(wú)', children: [ { id: 4, event: '事件4', timeLine: 5, comment: '無(wú)' }, { id: 5, event: '事件5', timeLine: 10, comment: '無(wú)' }, { id: 6, event: '事件6', timeLine: 75, comment: '無(wú)', children: [ { id: 7, event: '事件7', timeLine: 50, comment: '無(wú)', 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: '無(wú)' } ] } ] } ] } ] } } } </script>
一下為一些整體思路,以及一些說(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)。
當(dāng)前標(biāo)題:詳解vue-cli+element-ui樹(shù)形表格(多級(jí)表格折騰小計(jì))
標(biāo)題鏈接:http://muchs.cn/article2/gecpic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)、網(wǎng)站收錄、網(wǎng)站排名、營(yíng)銷型網(wǎng)站建設(shè)、App設(shè)計(jì)、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)