用能对比知识点：（一）树状结构

数据结构树结构

树的定义

• 树是一种很特别的数据结构，因为它长得像一颗树，但是这棵树化成的图，是一颗倒挂着的，跟在上，叶在下。

节点的度

• 一个节点含有的子树的个数，成为该节点的度；

叶节点

• 度为0的节点成为叶节点，就是没有子节点的，最后一个节点；

分支节点

• 度不为0的节点；

调用树状结构的列表的内容

实例

<el-form-item label="区域" prop="deptId">
	<treeselect
	 v-model="queryParams.deptId"
	 :options="treeselect"
	 :show-count="true"
	 placeholder="请选择归属部门"
	 style="width: 220px"
	 append-to-body
	 @select="handleSelectDept"
	 />
 </el-form-item>
 
 // 选择部门
		handleSelectDept(node) {
			console.log('部门', node)
			this.queryParams.deptId = Number(node.id)
			console.log('部门deptid', this.queryParams.deptId)

			// 	this.deptName = node.label
		},

• :show-count="true"的意思是显示计数；
• append-to-body的意思是，内嵌el-dialog时才会用到,这里应该用不到；
• select,选择一个选项后发出，选择后获取数据，然后传给输入框里面的值；

模板案例

-其实树结构也很简单的；这样一看，总觉得很难一样；

• 通过npm安装vue-treeselect;

npm install --save @riophae/vue-treeselect

• 先写一个盒子

<template>
  <div id="app">
    <treeselect 
     v-model="value" 
     :multiple="true" 
     :options="options"
     />
    <treeselect-value :value="value" />

``` - 下面script里面再引入一些方法： ``` import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default { components: { Treeselect }, data(){ return { value:null; //显示在框里免得内容 options:[{ id:'a', label:'a', children:[{ id:'aa', label:'aa', },{ id:'ab', label:'ab' }], }，{ id:'b', label:'b', },{ id:'c', label:'c', }], } }, } ```