el-select 和el-tree 结合 下拉树二级联动

表单

  <el-row>
 <el-col :span="8">
            <el-form-item label="项目名称" prop="xmid">
              <el-select
                @change="loadGdlxTreeInfo"
                v-model="addForm.xmid"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in xmmcOptions"
                  :key="item.projectId"
                  :label="item.projectName"
                  :value="item.projectId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务项目" prop="fwsxmc">
              <el-select
                v-model="addForm.fwsxmc"
                placeholder="请选择"
                size="small"
                ref="selectReport"
              >
                <el-option
                  :value="addForm.fwsx"
                  :label="addForm.fwsxmc"
                  style="
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    background-color: #fff;
                  "
                >
                  <el-tree
                    :data="fwxmOptions"
                    :props="{
                      value: 'id',
                      label: 'gdlxmc',
                    }"
                    @node-click="handleNodeClick1"
                  ></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            </el-row>

data数据

    addForm: {
        fwsx: "",
        fwsxmc: "",
      },
      fwxmOptions:[]，
      

js数据

项目名称接口

  //根据项目ID获取菜单树数据
     loadGdlxTreeInfo(val) {
        this.queryParams.cxFwsxmc = "";
        this.queryParams.cxFwsx = "";
        this.addForm.fwsxmc = "";
        this.addForm.fwsx = "";
        this.fwxm(val)
    },
    async fwxm(val){
      const { data: res } = await this.$postRequest("gdlx/loadGdlxTreeInfo", {
        projectId: val,
      });
      if (res.flag == "Y") {
        this.fwxmOptions = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },

服务事项点击事件

  handleNodeClick1(val) {
      this.$set(this.addForm, "fwsx", val.id);
      this.$set(this.addForm, "fwsxmc", val.gdlxmc);
      if (!val.children || val.children.length == 0) {
        this.$refs.selectReport.blur();
      }
    },

加载数据时渲染 this.fwxm(res.data.xmid);