前言：项目中有的需求，需要在表格中展示树形结构，官网阐述的不是很清晰明了，毕竟不是实战，废话不多说；，直接上代码
一、树形表格
效果图：
接口数据结构：
DOM结构：
<el-table cell-style="padding:0" :data="treeData" row-key="id" lazy :load="load" :tree-props="{children: 'zzChildren'}">
<el-table-column show-overflow-tooltip prop="name" :label="$t('appsSecond.item_name')"></el-table-column>
<el-table-column prop="authRoleCount" label="已授权校色" width="100">
<template slot-scope="scope">
<div style="width: 100%;cursor:pointer" @click="openInfoDrawer(scope.row,'role')">
<span >{{ scope.row.authRoleCount }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="authAccountCount" label="已授权账号" width="170">
<template slot-scope="scope">
<div style="width: 100%;cursor:pointer" @click="openInfoDrawer(scope.row,'account')">
<span >{{ scope.row.authAccountCount }}</span>
</div>
</template>
</el-table-column>
</el-table>
js结构：
export default {
data() {
return {
treeData: []
}
}，
created() {
this.getInit()
},
methoods: {
getInit() {
this.treeData = []
api().then((res) => {
this.treeData = res.data.data.data.data
if (this.treeData) {
this.initTree(this.treeData)
}
})
},
initTree(treeData) {
treeData.forEach(item => {
item.hasChildren = !item.leaf
})
},
load(row, treeNode, resolve) {
api().then((res) => {
let childrenData = res.data.data
this.initTree(childrenData)
resolve(childrenData)
})
},
}
二、传统表格
效果图：
接口数据结构：
为传统表格数组结构
DOM结构：
<lls-table class="customer-expand-table" :data="tableData" ref="multipleTable" row-key="taskId" border @expand-change="expandChange" @selection-change="handleSelectionChange">
<lls-table-column type="selection" width="50" v-if="pageType === 'Todo' || pageType === 'Pending'" fixed="left" align="center"></lls-table-column>
<lls-table-column type="expand" class="childtable" width="1">
<template slot-scope="scope">
<ExpandTable :expandData="scope.row.dropSampleList" :pageType="pageType"></ExpandTable>
</template>
</lls-table-column>
<lls-table-column type="index" label="序号" align="center" :fixed="pageType === 'Todo' ? none : 'left'"></lls-table-column>
<lls-table-column prop="ext1" label="批号" show-overflow-tooltip width="130px" align="center"></lls-table-column>
<lls-table-column prop="ext2" label="申请方" show-overflow-tooltip width="150px" align="center"></lls-table-column>
<lls-table-column prop="ext3" label="笔数" show-overflow-tooltip align="center"></lls-table-column>
<lls-table-column prop="ext4" label="金额（元）" :formatter="formatMoney" align="right" show-overflow-tooltip width="130px"></lls-table-column>
<lls-table-column prop="ext5" label="实际金额（元）" :formatter="formatMoney" align="right" show-overflow-tooltip width="130px"></lls-table-column>
<lls-table-column prop="ext6" label="利息（元）" :formatter="formatMoney" align="right" show-overflow-tooltip width="130px"></lls-table-column>
<lls-table-column prop="ext7" label="申请时间" show-overflow-tooltip width="120px" align="center"></lls-table-column>
<lls-table-column prop="ext8" label="利率（%）" show-overflow-tooltip align="center" width="120px"></lls-table-column>
<lls-table-column prop="ext9" label="状态" show-overflow-tooltip align="center"></lls-table-column>
<lls-table-column prop="ext10" label="付息方式" show-overflow-tooltip align="center"></lls-table-column>
<lls-table-column prop="ext11" label="最新操作人" show-overflow-tooltip width="120px" align="center"></lls-table-column>
<lls-table-column prop="taskName" label="当前节点" show-overflow-tooltip width="100px" align="center"></lls-table-column>
<lls-table-column prop="ext13" label="提交时间" show-overflow-tooltip width="130px" align="center"></lls-table-column>
<lls-table-column prop="operateTime" label="操作" width="110px" fixed="right" align="center">
<template v-slot:default="{ row }">
<div class="table-btn" @click="toogleExpand(row)"> {{ row.expansionStatus ? '收起详情' : '展开详情' }} </div>
</template>
</lls-table-column>
</lls-table>
js结构：
export default {
data() {
return {
tableData: []
}
}，
created() {
this.getInit()
},
methoods: {
getInit() {
this.$http.post(apiParams, this.queryParams).then((res) => {
if (res.data.code === '200') {
this.tableData = res.data.data.records
this.tableData.forEach((item) => {
item.expansionStatus = false
})
}
}
}，
expandChange(row, expandedRows) {
if(expandedRows.length) {
// 展开
this.$set(row, 'expansionStatus', true)
} else {
// 收起
this.$set(row, 'expansionStatus', false)
}
},
}
}
