vue3 element-plus @visible-change默认触发两次事件的解决方法

vue3 element-plus @visible-change使用时触发两次事件请求的效果如下：

下拉框的构造code：

<el-form-item label="门店名称:" prop="sid" :rules="[ { required: true, message: '请选择门店' }]">
            <el-select v-model="addTallyForm.sid" @visible-change="storeInfo" clearable placeholder="请选择门店">
<!--                :value--实际值；  :label--显示值-->
                <el-option
                        v-for="item in storeInfos"
                        :key="item.sid"
                        :value="item.sid"
                        :label="item.storeName"
                >
                {{item.storeName}}
                </el-option>
            </el-select>
            <p>您选择的门店的Id是：{{addTallyForm.sid}}</p>
</el-form-item>

@visible-change="storeInfo"事件code：

storeInfo() {
                const cardInfo = this.axios.post('storeinfo')
                cardInfo.then((dd) => {
                    const res = dd
                    console.log(res)
                        if (res.data.code !== 1) {
                            alert("发生某些错误，请重试")
                            this.$router.push('/userIndex')
                        }
                        // turn in /home
                        if (res.data.code === 1)
                            this.storeInfos = res.data.data
                        console.log(this.storeInfos)
                })

            },

前端点击前：

点击时发送了请求：

选择后，可见console多发了一次请求：

vue3 element-plus @visible-change解决方案

注意：事件是会触发两次的，通过增加判断来选择性发送事件绑定的请求。

1、先判断默认未选中时，此框的默认值：通过console输出（console.log(this.addTallyForm.sid)）识别最快。
2、此处增加一个判断，当清空选择框后，再次选择时，需重新发起事件进行同步最新数据。
3、if判断，当时选择框是默认（值为undefined）值或者清空后（值为空，非null），点击时需要发送请求，其余情况不发送。
因此只需改变script对应的事件触发代码，如下：

            // 点击select框时触发的方法--获取商店列表
            storeInfo() {
                console.log(this.addTallyForm.sid)
                // @visible-change触发事件默认会触发两次，第一次是点开下拉时，第二次是选中数据隐藏下拉时
                // 对数据进行判别，数据为undefined或空时，才进行事件触发。
                if(this.addTallyForm.sid == undefined || this.addTallyForm.sid == ""){
                    const cardInfo = this.axios.post('storeinfo')
                    cardInfo.then((dd) => {
                        const res = dd
                        console.log(res)
                        if (res.data.code !== 1) {
                            alert("发生某些错误，请重试")
                            this.$router.push('/userIndex')
                        }
                        // turn in /home
                        if (res.data.code === 1)
                            this.storeInfos = res.data.data
                        console.log(this.storeInfos)
                    })
                }

            },

效果：




至此，解决了@visible-change默认触发两次事件发送两次请求的问题。

PS：
:key="item.sid" //避免发生数据混乱
:value="item.sid" //绑定的实际值
:label="item.storeName" //前端界面需要的显示值