Vue绑定下拉框型的树

<!-- author:XYG -->
<!-- title:系统树机构 -->
<template>
  <div>
    <div style=" 30%;float: left;">
      <el-form :data="options">
        <!-- <el-form-item label="父类名称："> -->
          <el-select v-model="nodeName" placeholder="请选择父类" ref="mySelect">
            <el-option :value="nodeCode" style="height: auto;">
              <el-tree :data="treeData" node-key="pCode" default-expand-all :expand-on-click-node="false" ref="tree"
                :props="Props" @node-click="nodeClick" @check-change="checkChange">
              </el-tree>
            </el-option>
          </el-select>

        <!-- </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    queryZiDianP //获取字典表全部数据
  } from "@/api/aqtc/jbshz/xitongfenlei/xtflList.js"; //js路径；@代表src
export default {
  data() {
      return {
        nodeName: '',//用来接树里选中的PCode
        nodeCode: '',//用来接树里选中的PName
        treeData: [],
        // 默认选中值
        selected: '0001',
        // 数据默认字段
        Props: {
          label: 'PName', // 标签显示
          children: 'children', // 子级
        },
        // 后台传来的字典表数据列表
        options: []
      }
    },
    mounted() {
      this.queryZDPList(this.parseData); //查询字典表给options;这里调用方法没this就会报is not defined
    },
    methods: {
      //树  start
      parseData(resData) {
        this.treeData = [];
        this.treeData.push({"PName":"顶级分类","PCode":"0"});
        if (resData != null && resData.length > 0) {
          for (var node of resData) { //找父节点
            if (node.ParentDM == '0') {
              node['children'] = this.childNodes(node.PCode, resData); //给node定义一个属性children
              this.treeData.push(node);
            }
          }
        }
        console.log(this.treeData)
      },
      childNodes(rootDM, resData) {
        var childNodes = [];
        for (var childNode of resData) { //找子节点
          if (childNode.ParentDM == rootDM) {
            childNode['children'] = this.childNodes(childNode.PCode, resData);
            childNodes.push(childNode);
          }
        }
        return childNodes;
      },
      //树 end
      nodeClick(node) { //
        console.log("nodeClick:");
        let no = Object.keys(node); //取object的key
        let pp = "Pname";
        let code = node[pp]; //取object的value
        this.nodeName = node.PName;
        this.nodeCode = node.PCode;
        console.log(this.nodeName);
        console.log(this.nodeCode);
      },
      checkChange() {
        console.log("checkChange:");
        var node = this.$refs.tree.getCheckedNodes();
        console.log(node);
      },
      //查询字典表
      queryZDPList(callBack) {
        // this.$options.methods.getTokens.bind(this)();//掉获取token的方法
        queryZiDianP().then(response => {
          console.log(response);
          callBack(response.response);
          console.log("this.options:");
          console.log(this.options);
          })
          .catch(erro => {
              this.$message({
                type: "info",
                message: "字典表查询失败！"
              });
            });
          },
    },
  }
</script>

<style>
</style>