Select 父类选中取消联动子类

当某程序猿兴高采烈修复完所有问题后，交付整个模块出去的时候，产品突发一句我认为选中父类联动有哪些子类，我需要取消父类的时候也要联动取消选中的子类
开发：mmp，怎么屁事这么多，还能不能好好的划个水
产经：别人竞品都可以，为什么我们系统不可以？
开发：… 内心已经想拿把30m的阳江十八刀砍过来了
迫于无奈开发小妹只能硬着头皮上了

效果图

代码片段

模板文件

  <a-form layout="inline"
            :form="form">
      <a-form-item>
        <a-select mode="multiple"
                  v-decorator="['site',{ validateTrigger: ['change', 'blur'] }]"
                  :maxTagCount="Number(1)"
                  :showArrow="true"
                  :maxTagTextLength="3"
                  allowClear
                  placeholder="父类(多选)"
                  class="control-home-select"
                  @change="handleChangeSite">
          <a-select-option :title="sites.site"
                           :value="sites.site"
                           v-for="(sites, index) in sites_arr"
                           :key="index">{{sites.site}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-select allowClear
                  mode="multiple"
                  :maxTagCount="Number(1)"
                  :showArrow="true"
                  :maxTagTextLength="3"
                  v-decorator="['platform_user']"
                  placeholder="子类(多选)"
                  class="control-home-select">
          <a-select-option :title="data.user_account"
                           :value="data.user_account"
                           v-for="(data,index) in userData"
                           :key="index">{{data.user_account}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

Js文件

export default { 
	data () { 
		return {
			 form: this.$form.createForm(this, { name: 'search_form' }),
    		 sites_arr: [{"site":"AE","site_name_cn":"阿联酋"},{"site":"AU","site_name_cn":"澳大利亚"}], //  父类列表数据
		     userData: [], // 子类列表数据
		     siteItemList: [],
		      getSiteArr: []
		}
	},
	methods： {
			handleChangeSite(e) {
				this.getSiteArr = e
			    this.$nextTick(() => {
			      this.getUser({ site: e })
			    })
			},
			getSite () {
			// this.sites_arr  => 这里本应该要从Api获取，当前自动默认赋值
			// 获取子类的值  默认获取全部
			this.getUser('', 'first')
		},
		getUser (params, type) {
			// 假设 userData的值通过Api获取，演示写死
			this.userData = [{"user_account":"123W","site":"AU"},{"user_account":"amazon01","site":"AU"},{"user_account":"summerkimy_US_1","site":"AE"},{"user_account":"ere","site":"AE"}]
			if (type) {
				const site_new_arr = this.sites_arr.map(v => v.site)
				const obj = {}
		        for (const i of site_new_arr) {
		          obj[i] = []
		          for (let j = 0; j < data.length; j++) {
		            if (data[j].site === i) {
		              obj[i].push(data[j].user_account)
		            }
		          }
		        }
        		this.siteItemList = obj
			}
		}
    },
    watch: {
 		getSiteArr : {
		      handler (value) {
		        const self = this
		        const platformList = self.form.getFieldsValue().platform_user
		        if (!value.length) {
		          if (platformList) {
		            self.form.setFieldsValue({ platform_user: undefined })
		          }
		          return false
		        }
		        let item = []
		        for (const i of value) {
		          item = item.concat(self.siteItemList[i])
		        }
		
		        if (!platformList || !platformList.length) return false
		        const hasPlatformList = item.filter(v => {
		          return platformList.indexOf(v) !== -1
		        })
		        self.form.setFieldsValue({ platform_user: hasPlatformList })
		      },
		      immediate: true
		    }
 	}
}

到此为止核心代码就已经贴完了

仅文章供自我记录和参考，不喜勿喷。