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组件代码：

<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.清楚渲染的是谁的数据

这里拿自己的举例，我渲染的是课程下拉的数据章节，在它调用接口下加入代码