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
		    }
 	}
}

到此爲止核心代碼就已經貼完了

僅文章供自我記錄和參考，不喜勿噴。