vue+ivew 下拉树的做法

效果图

代码

<template>
	 <div class="mar-tb">
      <span class="shixiang">可视范围：</span>
      <Select v-model="viewing" placeholder="请选择可视区域" style="width:60%" multiple>
        <Option
          v-for="(item, i) in tree"
          :value="item.id"
          :key="i"
          style="display: none;"
        >{{ item.name }}</Option>
        <Tree
          :data="treeData"
          ref="tree"
          @on-check-change="treeArr"
          :render="renderContent"
          show-checkbox
        ></Tree>
      </Select>
    </div>
</template>
<script>
    export default{
        data:function(){
            viewing: "",
            primaryList: [],
            check: {},
            tree: [],
            treeData: []
        },
         mounted: function() {
            this.primary();
        },
         methods: {
              primary: async function() {
      const result = await this.$http.post("api/admin/dept/getInternalDept");
      if (result.success) {
        this.primaryList = result.data;

        var arr = [];

        for (let i = 0; i < this.primaryList.length; i++) {
          var obj = {};

          obj.title = this.primaryList[i].deptName;
          obj.value = this.primaryList[i].id.toString();
          obj.expand = true;

          arr.push(obj);
        }

        this.treeData.push({
          title: "选择全部单位",
          expand: true,
          selected: true,
          value: "0",
          children: [...arr]
        });
      }
    },
    treeArr(data) {
      var data4 = [];
      this.tree = [];
      for (let i = 1; i < data.length; i++) {
        var obj = {};
        obj.id = data[i].value;
        obj.name = data[i].title;
        data4.push(data[i].value);

        this.tree.push(obj);
      }

      this.viewing = data4;
      console.log(this.viewing);
      
    },
    renderContent(h, { root, node, data }) {
      return h(
        "Option",
        {
          style: {
            display: "inline-block",
            margin: "0"
          },
          props: {
            value: data.value
          }
        },
        data.title
      );
    },
         }
    }
</script>
<style >
</style>

接口数据

做这种效果

​ 难的地方是怎么把数据关联起来

yle >

#### 接口数据

[外链图片转存中...(img-uwFMtC8w-1574386847519)]

做这种效果 

​	难的地方是怎么把数据关联起来 

​	然后处理接口返回的数据