vue下拉框多选，动态请求多个选中的数据

最新推荐文章于 2024-08-01 14:22:09 发布

今晚来我家吗

最新推荐文章于 2024-08-01 14:22:09 发布

阅读量1.3k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_43059898/article/details/109313741

版权

 <el-form-item label="Business Unit">
      <el-select v-model="UserForm.BusinessUnitIds" placeholder="" multiple style="width:100%" @change="change()" >
      	<el-option v-for="item in BusinessUnitList"   :key="item.Code"   :label="item.Value"   :value="item.Id"  ></el-option>
       </el-select>
   </el-form-item>
   // Business Unit发生改变数组重新加载
   <el-form-item label="Product Type">
       <el-select v-model="UserForm.ProductTypeIds" placeholder="" multiple style="width:100%">
       <el-option v-for="item in ProductTypeList" :key="item.Id" :label="item.Value" :value="item.Id"></el-option>
       </el-select>
   </el-form-item>





data() {
return	{
 UserForm:{
       BusinessUnitIds: [],
   },
 BusinessUnitList: [],
 ProductTypeList： [],
 arr:[]
	}
}


   created() {
            this.getInfo()
            this.SearchSelect("BU", "BU");
        },
 methods:{
	  	 /**
             * 字典查寻
             * @params 字典名称
             * @type 字典类型
             */
            SearchSelect(params, type) {
            this.$store
                .dispatch("description/QueryName", params)
                .then(data => {
                if (type === "BU") {
                    this.BusinessUnitList = data;
                } else if (type === "Product") {
                	
                	// BU发生改变就是push到arr数组中
                    this.arr.push(...data);
                } 
                }).catch(error => {});
            },


            /**
             * @UnitChange BU回调
             */
            change() {
                this.arr = []; // 清空新数组
                const BusinessUnitIds = this.UserForm.BusinessUnitIds;
                const BusinessUnitList = this.BusinessUnitList;
                if (BusinessUnitIds.length > 0) {
                    for (let i = 0; i < BusinessUnitIds.length; i++) {
                        for (let j = 0; j < BusinessUnitList.length; j++) {
                            if(BusinessUnitIds[i] == BusinessUnitList[j].Id) {
                                let Product = `${BusinessUnitList[j].Value}_Product`;
                                this.SearchSelect(Product, "Product");
                            }
                        }
                    }
                } else {
                    this.ProductTypeList = [];
                }
             
            },
}