vue+element下拉框实现二级联动

参考文章：https://blog.csdn.net/qq_42341025/article/details/86601093

<el-form-item label-width="80px" label="商品信息:" prop="numIids">
        <el-select
          v-model="goodsCircle.favoritesId"
          @change="selectExitSelectConfig"
          filterable
          remote
          placeholder="请选择现有选品库"
        >
          <el-option
            v-for="item in favorites"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <span>-</span>
        <el-select
          v-model="goodsCircle.numIids"
          @change="selectLocalSelectConfig"
          filterable
          remote
          multiple
         
          placeholder="请选择本地商品库"
          style="width:60%"
        >
          <el-option
            v-for="item in localFavorites"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
      </el-form-item>

1.页面一加载就开始获取现有商品信息（及一级菜单），然后得到的数组重新整合赋给favorites
2.

<script>
export default {
  data() {
    return {
      goodsCircle: {
        title: "",
        authorInfo: {},
        author: "",
        authorImg: "",
        content: "",
        favoritesId: null,
        numIids: []
      },
      favorites: [],
      localFavorites: [],
      listQuery: {
        liilType: 2, //1,为系统基础配置,不可调节;2暂定为朋友圈选品库,不传查询全部
        enableStatus: 1, //：启用状态（默认查询启用）；-1废弃
        authorStatus: 1 //1,有效的发布者
      },
    };
  },
  methods: {
  //改变value值，实现 联动， 给下拉框绑定change事件
    selectExitSelectConfig(val) {
       this.localFavorites = [];
      this.goodsCircle.numIids = null,
      this.getLocalSelectConfig();
    },
     selectLocalSelectConfig(val) {
      console.log(val);
    },
    getExitSelectConfig() {
      this.$api.operation
        .getExitSelectConfig({
          liilType: 2,
          status: this.listQuery.enableStatus
        })
        .then(res => {
          if (res.data.code == 200) {
            let arr = [];
            res.data.result.forEach((res, index) => {
              arr[index] = {
                key: res.favoritesId,
                label: res.favoritesTitle
              };
            });
            this.favorites = arr;
            this.getLocalSelectConfig();
          }
        });
    },
   
    getLocalSelectConfig() {
      this.$api.operation
        .getLocalSelectConfig({
          favoritesId: this.goodsCircle.favoritesId
        })
        .then(res => {
          if (res.data.code == 200) {
            let arr = [];
            res.data.result.forEach((res, index) => {
              arr[index] = {
                key: res.numIid,
                label: res.title
              };
            });
            this.localFavorites = arr;
          }
        });
    },
    
  },
  computed: {
    contentShortLength() {
      return this.goodsCircle.content.length;
    }
  },
  mounted() {
    this.getExitSelectConfig();
  },
  watch: {
    favorites: {
      handler(newValue, oldValue) {},
      deep: true
    },
    localFavorites: {
      handler(newValue, oldValue) {},
      deep: true
    }
  },
  created() {
    this.getExitSelectConfig();
  }
};
</script>

------------------------------------------------------------华丽分割线---------------------------------------------------------
后因业务需求，所以做了改善

<el-select
          v-model="goodsCircle.favoritesId"
          @change="selectExitSelectConfig"
          filterable
          remote
          placeholder="请选择现有选品库"
        >
          <el-option
            v-for="item in favorites"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <el-checkbox-group
          class="el-row"
          v-model="checkedNumIids"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            class="local-el-checkbox el-col el-col-6"
            v-for="item in localFavorites"
            :value="item.key"
            :label="item.key"        
          >
            <el-card class :body-style="{ padding: '0px',lineHeight:'2'}" style="margin:20px auto">
              <!-- <span class="gou" :class="{on:imgChecked}" v-if="imgChecked"></span> -->
              <img :src="item.pictUrl" class="image" />
              <div style="padding: 14px;">
                <p class="hide-moreCon">{{item.title}}</p>
                <p>
                  优惠券数量：
                  <em style="color:#f40">{{item.couponRemainCount}}</em>
                  / {{item.couponTotalCount}}
                </p>
          
                <div class="bottom clearfix">
                  <time
                    class="time"
                  >优惠券有效时间：{{formatDate(item.couponStartTime)}}至{{formatDate(item.couponEndTime)}}</time>
                </div>
              </div>
            </el-card>
          </el-checkbox>
        </el-checkbox-group>

this.checkAll = checkedCount === this.localFavorites.length;这里一定要和原数组作比较

<script>
export default {
 methods: {
   // 选择本地商品库
    handleCheckAllChange(val) {
      // this.checkedCities = val ? this.localFavorites : [];
      const temp = [];
      this.localFavorites.forEach((res, index) => {
        console.log(res);
        temp[index] = val ? res.key : [];
      });
      this.checkedNumIids = temp;
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.localFavorites.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.localFavorites.length;
    },
  

    selectExitSelectConfig(val) {
      this.localFavorites = [];
      (this.goodsCircle.numIids = null), this.getLocalSelectConfig(val);
    },
    getExitSelectConfig() {
      this.$api.operation
        .getExitSelectConfig({
          liilType: 2,
          status: this.listQuery.enableStatus
        })
        .then(res => {
          if (res.data.code == 200) {
            let arr = [];
            res.data.result.forEach((res, index) => {
              arr[index] = {
                key: res.favoritesId,
                label: res.favoritesTitle
              };
            });
            this.favorites = arr;
            this.getLocalSelectConfig();
          }
        });
    },
   getLocalSelectConfig(favoritesId) {
      this.$api.operation
        .getLocalSelectConfig({
          favoritesId: this.goodsCircle.favoritesId
        })
        .then(res => {
          if (res.data.code == 200) {
            let arr = [];
            res.data.result.forEach((res, index) => {
              arr[index] = {
                key: res.numIid,
                title: res.title,
              };
            });
            this.localFavorites = arr;
          }
        });
    },
     },
  computed: {
    contentShortLength() {
      return this.goodsCircle.content.length;
    }
  },
  mounted() {
    this.getExitSelectConfig();
  },
  watch: {
    favorites: {
      handler(newValue, oldValue) {},
      deep: true
    },
    localFavorites: {
      handler(newValue, oldValue) {},
      deep: true
    }
  },
  created() {
    this.getExitSelectConfig();
  }
};