vue 三级联动表单拆分

问题描述：接口返回tree型数据，前端需要展示三个下拉框，每一子集选项由父级确定。

数据结构：build -> floor -> room。

通过监听build选中计算出响应的floorList，同理计算出roomList。

实现问题：build切换时，this.from.floorId = null 重置form.floorId,导致操作表单时，form.floorId赋值失败，使用this.$set()解决。

this.$set(this.form, "floorId", "");

html代码

<el-row>
        <el-col :span="24">
          <el-form-item label="楼栋：">
            <ls-select
              v-model="form.buildingId"
              placeholder="请选择"
              class="form-item"
            >
              <ls-select-menu slot="menu">
                <ls-select-item
                  v-for="item in build"
                  :key="item.value"
                  v-bind="item"
                ></ls-select-item>
              </ls-select-menu>
            </ls-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="楼层：">
            <ls-select
              v-model="form.floorId"
              placeholder="请选择"
              class="form-item"
            >
              <ls-select-menu slot="menu">
                <ls-select-item
                  v-for="item in floor"
                  :key="item.value"
                  v-bind="item"
                ></ls-select-item>
              </ls-select-menu>
            </ls-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="房间号：" prop="roomId">
            <ls-select
              v-model="form.roomId"
              placeholder="请选择"
              class="form-item"
            >
              <ls-select-menu slot="menu">
                <ls-select-item
                  v-for="item in rooms"
                  :key="item.value"
                  v-bind="item"
                ></ls-select-item>
              </ls-select-menu>
            </ls-select>
          </el-form-item>
        </el-col>
      </el-row>

　　js 代码：

computed: {
    build() {
      // 楼栋列表
      const { cascade } = this;
      const list = cascade.map((ele) => {
        return {
          value: ele.id,
          label: ele.name,
        };
      });
      return list;
    },
    floor() {
      // 选中楼栋楼层列表
      const { buildInfo } = this;
      const list = buildInfo.map((ele) => {
        return {
          value: ele.id,
          label: ele.name,
        };
      });
      return list;
    },
    rooms() {
      // 选中楼层房间列表
      const { floorInfo } = this;
      const list = floorInfo.map((ele) => {
        return {
          value: ele.id,
          label: ele.name,
        };
      });
      return list;
    },
  },
  watch: {
    "form.buildingId"(val) {
      if (!val) {
        return (this.buildInfo = []);
      }
      this.$set(this.form, "floorId", "");
      this.buildInfo = this.cascade.filter((ele) => ele.id === val)[0].parents;
    },
    "form.floorId"(val) {
      if (!val) {
        return (this.floorInfo = []);
      }
      this.$set(this.form, "roomId", "");
      this.floorInfo =
        this.buildInfo.filter((ele) => ele.id === val)[0].parents || [];
    },
  }