vue之el-tree

---

1.结构

代码如下（示例）：

  <el-tree
    :data="data"  //存放数据
    props="defaultProps" 
    :expand-on-click-node="false"// 点击节点时展开或者收缩节点
    highlight-current //是否高亮
    :node-key="id" //其值为节点数据中的一个字段名，该字段在整棵树中是唯一的
    @check-change="checked"//节点选中状态发生变化时的回调
    @check = "handleCheck"//当复选框被点击的时候触发	
    :filter-node-method ='fileterNode'//值为过滤函数
     show-checkbox//可选择框
    :default-checked-keys="lawArr" //默认勾选的节点数组 值要为id
    check-strictly   //可以不和父级关联 做单选功能
    :default-expand-all="true"/>//是否默认展开所有节点	
  export default{
    data(){
		defaultProps: {
	        children: 'children',
	        label: 'name', //显示的字段名
	        pid: 'parentId'
	     },
	     radioData：{}
	},
	methods:{
	 	getChecked(item) {
	      this.radioData = item
	      console.log(this.$refs.tree.getCheckedNodes())
	     },
		 filterNode(value, data) {
	      if (!value) return true
	      return data.allCatalogName.indexOf(value) !== -1
	    },
	     handleCheck(a, b) {
	      // a为传递给 data 属性的数组中该节点所对应的对象；b为树目前的选中状态对象 
	      if (b.checkedKeys.length > 0) {
	        this.$refs.tree.setCheckedKeys([a.id])
	      }
	    }
	}
  }

2.数据转变树形格式

代码如下（示例）：

//一般后台不会直接给你树型结构 其实前端也非常方便转换
// @aximario/json-tree 此插件可以扁平化数据 
//直接下载 --> npm install --save @aximario/json-tree

import { construct } from '@aximario/json-tree';

              //construct 会自动过滤掉 null 和 undefined 值
  this.data = construct(this.data , // data是数组，要扁平化的数据
  		 {  // 第二个参数为 配置对象 
            id: 'id',
            pid: 'parentId', // 展开后的父节点 id 名称
            children: 'children' // 子节点名称
 		 })
  //返回一个数组对象，里面可能包含多个树结构

---

结尾

只是记录一下自己工作中所用到的东西 如果可以帮助到你 我很开心 如果没有帮助到你 我会继续加油的🤭