Foreword: some requirements in the project, need to show the tree structure in the table, the official website is not very clear and clear, after all, not actual combat, nonsense is not much, directly on the code
Effect:
Interface data structure:
The DOM structure:
<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=" Authorized Account "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>Copy the codeJs structure:
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) }) }},Copy the code