使用element-ui里的下拉框select做的三级联动遇到的问题

第一次进行选择的时候是没有问题的
在这里插入图片描述
当第一个下拉框发生改变的时候,没给后面两个框绑定的值清空就会产生问题
在这里插入图片描述
所以最后在第一个下拉框发生变化的时候清空另外两个框绑定的值

<el-form-item label="产品类" prop="productClassId">
                            <template>
                                <el-select v-model="addForms.specificationId" placeholder="请选择产品分类" @change="seclectSpecificationId($event)">
                                  <el-option 
                                    v-for="item in goodIdArr"
                                    :key="item.specificationId"
                                    :label="item.specificationName"
                                    :value="item.specificationId"
                                    >
                                  </el-option>
                                </el-select>

                                <el-select v-model="addsForm.productClassId" placeholder="请选择产品" @change="seclectProductClassId($event)">
                                  <el-option 
                                    v-for="item in productClassList"
                                    :key="item.productClassId"
                                    :label="item.className"
                                    :value="item.productClassId"
                                    >
                                  </el-option>
                                </el-select>

                                <el-select v-model="addsForm.productTypeId" placeholder="请选择产品类型" @change="seclectProductTypeId($event)">
                                  <el-option 
                                    v-for="item in ProductClassLists"
                                    :key="item.productTypeId"
                                    :label="item.typeName"
                                    :value="item.productTypeId"
                                    >
                                  </el-option>
                                </el-select>

                            </template>
                        </el-form-item>

在这里插入图片描述
昨天测试一切都是正常的,但第二天发现第三个框会无法选中数据
我去查了一下出现这个问题好像是因为下拉框数据是循环调别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷新所以我直接强制刷新了值,而forceUpdate就是重新render。

利用this.$forceUpdate()强制刷新
新代码如下:

// 获取二级选择器的内容
        seclectSpecificationId(val) {
            this.addForms.specificationId = val
            productClassPageList(this.addForms).then(res=> {
                if (res.data.code !== 1) return
                this.productClassList = res.data.resultData
                this.addsForm.productClassId = ''
                this.addsForm.productTypeId = ''
            })
        },
        // 获取三级选择器的内容
        seclectProductClassId(val) {
            this.$forceUpdate()
            this.addsForm.productTypeId = ''
            this.addsForm.productClassId = val
            this.addForm.productClassId = this.addsForm.productClassId
            typeNameList(this.addsForm).then(res=> {
                if (res.data.code !== 1) return
                this.ProductClassLists = res.data.resultData
            })
        },
        seclectProductTypeId(val) {
            this.$forceUpdate()
            this.addForm.productTypeId = val
        },
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
### 回答1: 在 element-ui 中,可以通过 `cascader` 组件实现下拉框的联动。以下是一个示例代码片段,实现了两个下拉框的二级联动: ``` <template> <div> <el-cascader v-model="selectedCities" :options="cities" @change="handleCityChange" clearable ></el-cascader> <el-cascader v-model="selectedDistricts" :options="districts" :show-all-levels="false" clearable ></el-cascader> </div> </template> <script> export default { data() { return { cities: [ { value: 'beijing', label: '北京', children: [ { value: 'dongcheng', label: '东城', }, { value: 'xicheng', label: '西城', }, ], }, { value: 'shanghai', label: '上海', children: [ { value: 'pudong', label: '浦东', }, { value: 'minhang', label: '闵行', }, ], }, ], districts: [], selectedCities: [], selectedDistricts: [], }; }, methods: { handleCityChange(value) { const city = this.cities.find((c) => c.value === value[0]); if (city) { this.districts = city.children; } else { this.districts = []; } this.selectedDistricts = []; }, }, }; </script> ``` 在上述代码中,我们使用了两个 `el-cascader` 组件,第一个用于选择城市,第二个用于选择区县。当城市选择发生变化时,我们根据所选城市的子节点来更新区县下拉框的选项,并将其清空,以避免用户选择错误的区县。 ### 回答2: element是一款基于Vue.js的UI组件库,提供了一系列的常用组件。其中,element中的select组件支持二级联动功能。下面我将详细解释如何使用element-ui实现select组件的二级联动。 首先,我们需要引入element-uiselect组件和option组件,并在Vue实例中注册这两个组件。 在template中,我们需要使用el-select和el-option标签来构建下拉框。el-select用于显示下拉框,el-option用于显示下拉框的选项。 二级联动的实现思路是,根据第一个下拉框的选项,动态生成第二个下拉框的选项。我们可以通过监听第一个下拉框的变化,动态更新第二个下拉框的选项。具体实现如下: 1. 在data中定义需要的数据,包括第一个下拉框和第二个下拉框的选项数据。 2. 在template中,使用el-select标签构建第一个下拉框,并绑定一个v-model,用来获取选中的。 3. 监听第一个下拉框的变化,使用watch选项,在回调函数中根据选中的动态生成第二个下拉框的选项。 4. 在template中,使用el-select标签构建第二个下拉框,并绑定一个v-model,用来获取选中的。 通过以上步骤,我们可以实现element-ui select组件的二级联动。当第一个下拉框改变时,第二个下拉框的选项也会相应改变。 需要注意的是,我们可以根据实际需求进行修改和扩展,例如三级联动、四级联动等,只需要在第三个、第四个下拉框中添加相应的监听和选项即可。 希望以上回答能帮助到您,如有其他问题,欢迎继续提问。 ### 回答3: element 也是一个流行的前端 UI 框架,它提供了许多实用的组件,其中包括 select 下拉框。而在 elementselect 中实现二级联动可以通过监听第一个下拉框的变化来动态修改第二个下拉框的选项。 首先,在 Vue 的实例中,我们需要定义两个变量,例如 province 和 city,分别用来保存第一级和第二级联动的选项。然后,我们在模板中使用 elementselect 组件,并绑定相应的变量。 在第一个下拉框中,我们需要设定一个监听函数,例如 handleChangeProvince,当选择了某一个省份时,该函数会被触发。在该函数中,我们可以根据选择的省份来更新第二个下拉框的选项,例如将 city 设为该省份所对应的城市列表。 实现这一过程的关键在于如何将第一个下拉框的选项和第二个下拉框的选项进行关联。一种常见的法是通过一个对象的键对来表示对应关系,例如一个 provinces 对象保存了省份和城市的对应关系,其中键表示省份,表示对应的城市列表。当选择了某一个省份时,我们可以通过 provinces[province] 来获取该省份所对应的城市列表。 最后,我们将更新后的城市列表赋给第二个下拉框的选项,这样就实现了二级联动。需要注意的是,当再次选择第一个下拉框时,第二个下拉框的选项也需要更新,以保证联动效果。 总之,通过利用 elementselect 组件和 Vue 的监听函数,我们可以轻松实现二级联动的下拉框。这样用户可以根据自己的需求选择对应的选项,提升了用户体验和交互性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值