参考文章：/qq_42341025/article/details/86601093
<el-form-item label-width="80px" label="商品信息:" prop="numIids"><el-selectv-model="goodsCircle.favoritesId"@change="selectExitSelectConfig"filterableremoteplaceholder="请选择现有选品库"><el-optionv-for="item in favorites":key="item.key":label="item.label":value="item.key"/></el-select><span>-</span><el-selectv-model="goodsCircle.numIids"@change="selectLocalSelectConfig"filterableremotemultipleplaceholder="请选择本地商品库"style="width:60%"><el-optionv-for="item in localFavorites":key="item.key":label="item.label":value="item.key"/></el-select></el-form-item>
1.页面一加载就开始获取现有商品信息（及一级菜单），然后得到的数组重新整合赋给
favorites2.
<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-selectv-model="goodsCircle.favoritesId"@change="selectExitSelectConfig"filterableremoteplaceholder="请选择现有选品库"><el-optionv-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-groupclass="el-row"v-model="checkedNumIids"@change="handleCheckedCitiesChange"><el-checkboxclass="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"><timeclass="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();}};
