Vue-查询数据以树状图效果渲染
目录
实现过程：
一、tree封装
1.tree组件代码：
2.定义dataList：
3.定义初始值
4.computed和mthods的区别：
二、注册tree权限
1.引入树形控件子组件
2.试题分类点击事件，调用接口（调用接口忽略）
3.清楚渲染的是谁的数据
老规矩：先走波流程看实现效果！
实现过程：
在question-edit界面实现查询数据，将数据以树状图效果渲染出来，question-edit要给tree文件注册权限。
首先讲解tree文件代码；再讲question-edit界面如何注册tree文件权限，实现数据以树状图渲染出来的。
代码在前，解释在后
一、tree封装
新建个文件夹tree
check-tree是专门查询数据承树状图渲染的效果，下面打开代码来详细讲解他的封装
1.tree组件代码：
{{ data.name }}
解释：
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.引入树形控件子组件
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.试题分类点击事件，调用接口（调用接口忽略）
试题分类 点击事件是弹出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.清楚渲染的是谁的数据
这里拿自己的举例，我渲染的是课程下拉的数据章节，在它调用接口下加入代码
