html部分:
// data:展示的数据
// accordion:是否每次只打开一个同级树节点展开
// props:配置选项 默认值
// expand-on-click-node:默认为true,值为false时点击小箭头才会展开收缩节点
// filter-node-method:返回true节点可以显示,false节点会被隐藏
// node-key:每个树节点的唯一标识
// default-expand-all:是否默认展开所有节点,默认值为false
// highlight-current: 选中节点是否高亮,默认值为false
// @node-click:点击目录时的操作
<el-tree
:data="outlineContentList"
accordion
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="mulucaozuo"
>
</el-tree>
2.在script中
<script>
// 引入树状图列表(目录)接口
import { pageOutline } from '@/utils/api.js'
export default{
data(){
return{
defaultProps:{
children:"children",
label:"outlineName"
},
//目录Id (接口提供的目录id名称)
outlineId:null,
//目录列表(自定义名称)
outlineList:[],
courseId:null,// 接口需要的参数
}
},
created(){
// 初次加载函数调用
this.getCatague()
},
// 方法
methods:{
//(树状图列表)目录
getCatague(){
// 目录接口(标头传参)
pageOutline(this.courseId).then(res=>{
this.outlineList=this.hanldeTree(
let config={
id:id || "id",
parentId: parentId || "parentId",
childrenList: children || "children",
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
// console.log(childrenListMap, "data");
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 节点点击事件
mulucaozuo(row) {
this.loading = true;
(this.outlineId = row.outlineId), this.detailedInformation();
},
)
})
}
}
}
</script>