element-UI 级联选择器

厂商选中的数据发生变化，类型的下拉列表数据发生改变，且选中的值清空

<el-col :span="18" style="display: flex" class="itemCol">
            <el-form-item
              label="厂商："
              label-width="200px"
              prop="vendor"
              :rules="[
                { required: true, message: '必填！', trigger: 'change' },
              ]"
            >
              <el-select
                v-model="form.vendor"
                placeholder="请选择"
                @change="getTypeList"
              >
                <el-option
                  v-for="(item, index) in vendorOption"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- </el-col>
              <el-col :span="10"> -->
            <el-form-item
              label="类型："
              label-width="200px"
              prop="type"
              :rules="[
                { required: true, message: '必填！', trigger: 'change' },
              ]"
            >
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="(item1, index1) in typeList"
                  :key="index1"
                  :label="item1"
                  :value="item1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14" class="itemCol">
            <el-form-item
              label="分类："
              label-width="200px"
              prop="category"
              :rules="[
                { required: true, message: '必填！', trigger: 'change' },
              ]"
            >
              <el-select v-model="form.category" placeholder="请选择">
                <el-option
                  v-for="(item2, index2) in categoryList"
                  :key="index2"
                  :label="item2.categoryName"
                  :value="item2.categoryName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

// 获取类型下拉数据（根据厂商切换）
    getTypeList(val) {
      const oldVal = val;
      request({
        url: "/api/admin/devtpl/getTplListByVendor?vendor=" + val,
        type: "get",
      })
        .then((res) => {
          if (res.code == 200) {
            this.typeList = res.data;
          }
        })
        .catch((err) => {})
        .finally(() => {});
    },

监控厂商的数据：

watch: {
    // 监测厂商数据是否发生变化
    typeList(newVal) {
      this.typeList = newVal;
      this.form.type = null;
    },
  },