简单tree树结构操作

<!-- 按钮 -->
<el-button
   size="mini"
   type="text"
   icon="el-icon-edit"
   @click="handleParticulars(scope.row)"
   >查看详情</el-button
 >

 <!-- 查看详情弹窗 -->
<div v-if="particulars">
   <el-dialog title="详情" :visible.sync="particulars" min-width="30%">
     <!-- 这个props相对于lazy懒加载才能实现 -->
     <el-tree
       :data="data"
       :props="defaultProps"
       :highlight-current="true"
       :load="loadDataTree"
       lazy
       :expand-on-click-node="false"
       node-key="id"
       :default-expanded-keys="['1']"
     ></el-tree>

     <span slot="footer" class="dialog-footer">
       <el-button @click="particulars = false">取 消</el-button>
       <el-button type="primary" @click="particulars = false"
         >确 定</el-button
       >
     </span>
   </el-dialog>
 </div>

<script>
export defalut {
	//弹窗默认为false
	data () {
		return {
			particulars: false,
			defaultProps: {
		        // 子节点的属性
		        children: "children",
		        // 节点标签名字
		        label: "name",
		        // 判断是否出现子节点
		        isLeaf: "isParent",
		      },
		       // 第一层的数据
		      rowData: {
		        id: "",
		        memberid: "",
		      },
		      // 第二层子级的数据
		      treeRowData: {
		        id: "",
		        pId: "",
		      },
		}
	},
	methods:{
		 // 点击查看详情
	    handleParticulars(row) {
	      this.particulars = true;
	      this.rowData.id = row.friendcode;
	      this.rowData.memberid = row.id;
	    },
	    loadDataTree(node, resolve) {
      // 当树节点只有第一层的时候
      if (node.level === 0) {
        getShareMemberTree(this.rowData).then((response) => {
          console.log(response)
          let res = response.rows[0];
          //当有第二层的同时 将第二层的数据接收
          if (res.isParent) {
            this.treeRowData.id = res.id;
            this.treeRowData.pId = res.pId;
          }
          return resolve([
            {
              name: res.name || "",
              // 因为后端返回的是字符串"false"，框架里面为true就是没有子集
              // 所以不能直接使用为true的时候，因为忽略了一个"false"为true的状态
              isParent:
                res.isParent === "false" || res.isParent === null
                  ? true
                  : false,
            },
          ]);
        });
        return;
      }
      // 当树节点有子节点的时候
      if (node.level >= 1) {
        getShareMemberTree(this.treeRowData).then((response) => 				{
          return resolve([
            {
              name: response.rows[0].name || "",
              isParent:
                response.rows[0].isParent === "false" ||
                response.rows[0].isParent === null
                  ? true
                  : false,
            },
          ]);
        });
      }
    },
	}
}
</script>