vue 实现树形表格 + 展开收起 + tooltip气泡悬浮提示 + 文字内容超出显示溢出
前言：项目中有的需求，需要在表格中展示树形结构，官网阐述的不是很清晰明了，毕竟不是实战，废话不多少，直接上代码
效果图：
接口数据结构：
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)
})
},
}
作者：bug爱好者
链接：https://juejin.cn/post/7025881693328244773