目录
老规矩：先走波流程看实现效果！
实现过程：
在question-edit界面实现查询数据，将数据以树状图效果渲染出来，question-edit要给tree文件注册权限。
首先讲解tree文件代码；再讲question-edit界面如何注册tree文件权限，实现数据以树状图渲染出来的。
代码在前，解释在后
一、tree封装
新建个文件夹tree
check-tree是专门查询数据承树状图渲染的效果，下面打开代码来详细讲解他的封装
1.tree组件代码：
-
<el-tree
-
:data=
"datas(dataList)"
-
ref=
"tree"
-
show-checkbox
-
node-key=
"id"
-
:check-strictly=
"false"
-
default-expand-all
-
:expand-on-click-node=
"false"
-
@
check-change=
"checkChange"
-
@
check=
"getCheckedNodes"
-
>
-
<span slot-scope="{ node, data }">
-
<span v-if="node.data.flag">{{ data.name }}
</span>
-
</span>
-
</el-tree>
解释：
node-key：未全选中子节点，父节点的node-key不会被放进绑定的数组里
check-strictly：表示在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
default-expand-all：并不能展开所有节点
expand-on-click-node: 是否在点击节点的时候展开或者收缩节点默认为true
2.定义dataList：
-
props: {
-
dataList: {
-
type: Array,
-
default: function() {
-
return [];
-
}
-
}
-
},
解释：
props：接收父组件question-edit传过来的值
3.定义初始值
-
data() {
-
return {
-
getKeys: [],
-
getLastKey:
"",
-
flag: true
-
};
-
},
解释：
getKeys：最字节点的key值
getLastKey：最字节点的key值
4.computed和mthods的区别：
computed:在HTML DOM加载后马上执行
methods：必须要有一定的触发条件才能执行
想一想当我想点击一个功能把树状图渲染出来，它的方法肯定在computed里，点击事件一加载就把树状图展现出来，所以：
下面就是一开始树状图组件中的两个事件了
@check-change="checkChange"
@check="getCheckedNodes"
此时，tree的查看展示封装好了，接来来讲如何注册它的权限
二、注册tree权限
像弹出dialog组件只是做了个visible的true和false，这里就不讲了
1.引入树形控件子组件
-
<tree :dataList="allTestClassify" @listenEvent="getCheckedNodes">
</tree>
-
-
import tree from "../tree/check-tree";
-
-
components: {
-
tree
-
},
-
-
methods: {
-
getCheckedNodes(value) {},
-
getCheckedNodes(getLastKey) {
-
this.keyID = getLastKey.id;
-
console.log(this.keyID);
-
},
-
}
解释：
@listenEvent="getCheckedNodes"：是tree组件中将数据提交过来的，这边利用getCheckedNodes做监听，接收子组件传过来的数据
import tree from "../tree/check-tree"：寻路径，这个不多解释了
components：全局组件，将tree注册权限
2.试题分类点击事件，调用接口（调用接口忽略）
<el-button type="primary" @click="showDialog" plain>试题分类</el-button>点击事件是弹出dialog对话框把树形图显示出来，它的调用接口就不多做解释了，上关键代码
-
async showDialog() {
-
this.allTestClassify.splice(0, this.allTestClassify.length);
-
this.proxyTestClassify = res.data;
-
this.proxyTestClassify.map((item, index) => {
-
this.allTestClassify.push(
-
Object.assign({
-
id: item.id,
-
name: item.name,
-
parentId: item.parentId,
-
flag: true
-
})
-
);
-
});
-
},
3.清楚渲染的是谁的数据
这里拿自己的举例，我渲染的是课程下拉的数据章节，在它调用接口下加入代码
转载：https://blog.csdn.net/weixin_39332529/article/details/106898798