image-20211014182521543
实现以上效果：
因为后台数据是不带 children嵌套数组方式的数据，所以根据 id来获取子集数据来渲染，要遵守element官方的数据格式
data: [
{ id: 1,label: '芷江侗族自治县',
children: [
{ label: '公坪镇',children: [{ label: '公坪村' }] },
{ label: '三道坑镇',children: [{ label: '五郎溪乡' }, { label: '木叶溪乡' }] }
]
}
]
获取到的数据格式如下：
image
上代码：
<template>
<div class="home-card">
<div class="card-left">
<el-card>
<el-aside style="height: 910px" :width="isCollapse ? '10px' : '230px'">
<span v-if="!isCollapse" class="nav">导航</span>
<i class="el-icon-arrow-left icon" @click="toggleCollapse()"></i>
<el-menu class="el-menu-vertical-demo menu">
<!--默认展开 拿到的 areaPlaceId值为字符串，:default-expanded-keys="['532822']数组中也要是字符串 -->
<el-tree
node-key="areaPlaceId"
:default-expanded-keys="['532822']"
accordion
class="tree"
:data="data"
highlight-current
lazy
:load="loadNode"
:props="defaultProps"
@node-click="handleNodeClick"
>
</el-tree>
</el-menu>
</el-aside>
</el-card>
</div>
<div class="card-right">
<el-card>
<el-main style="height: 910px"> 右侧内容 </el-main>
</el-card>
</div>
</div>
</template>
<script>
import { getAction } from '@/api/manage'
export default {
data() {
return {
// 控制侧边栏 false为折叠, true为展开
isCollapse: false,
data: [],
defaultProps: {
childre: 'childre'， // 这里因为拿到数据没有children、所以可有可无
label: 'areaName', // 指定树结构的label值，后面的值都为拿到数据里有的值
isLeaf: 'hasChild', // isleaf决定是否为有子节点
},
url: {
getChildListBatch: 'maintain/administrativeDivision/getChildListBatch',
},
}
},
methods: {
// 加载 树数据、loadNode()方法、此函数函数接收两个参数，一个是node,即当前节点，一个是resolve作为数据处理函数
loadNode(node, resolve) {
if (node.level === 0) {
return this.getList(resolve)
}
if (node.level >= 1) {
return this.getChildList(node, resolve)
}
},
//获取树结构 父集数据
async getList(resolve) {
const { result: res } = await getAction(this.url.getChildListBatch, { parentIds: 0 })
//将hasChild转换成boolean、对应data中的 isLeaf值
res.records.forEach((item) => {
item.hasChild == 1 ? (item.hasChild = false) : (item.hasChild = true)
})
resolve(res.records)
},
//获取树结构 子集数据
async getChildList(node, resolve) {
const { result: res } = await getAction(this.url.getChildListBatch, { parentIds: node.data.id })
res.records.forEach((item) => {
item.hasChild == 1 ? (item.hasChild = false) : (item.hasChild = true)
})
resolve(res.records)
},
toggleCollapse() {
this.isCollapse = !this.isCollapse
console.log(this.isCollapse)
},
//选中树节点 (暂时没什么用)
handleNodeClick(data) {
console.log('点击选中的数据', data)
},
},
}
</script>
碰到的一些小问题：
/** 去除侧边栏展开折叠出现的x和y轴的滚动条 */
.el-aside::-webkit-scrollbar {
display: none;
}
通过控制isCollapse的boolean值来决定是否侧边栏伸展
<el-aside style="height: 910px" :width="isCollapse ? '10px' : '230px'">
<span v-if="!isCollapse" class="nav">导航</span>
<i class="el-icon-arrow-left icon" @click="toggleCollapse()"></i>
</el-aside>
:collspae="isCollapse" (官方属性写法)
/** 树结构懒加载问题 */
el-tree标签上这两个搭配使用才能生效
lazy
:load="loadNode"
主要用到的请求到的数据搭配 resolve使用
loadNode(node, resolve) {}
<a href='https://www.cnblogs.com/keepdo/p/13417452.html'>受启发于：</a>
