解决Element-Plus中el-switch的change方法自动触发问题

下面el-switch代码片段是在el-table里使用

html 复制代码
<el-switch 
    v-else-if="col.prop == 'status'" 
    v-model="scope.row.status" 
    :active-value="'0'" 
    :inactive-value="'1'" 
    :before-change="beforeStatus" 
    @change="changStatus(scope.row.status, scope.row.goodsId)">
</el-switch>

el-switch方法代码是Vue3.0框架 typeScript语法格式

javascript 复制代码
<script setup lang="ts">
// 该引入是全局封装getCurrentInstance()方法 代码在下面
import comInstance from "@/hooks/comInstance";

// 获取全局属性
const { global } = comInstance();

// 判断是否在点击弹窗确认按钮时才调用接口
const tags = ref('')

// before方法加一个弹窗提示是否操作
const beforeStatus = async () => {
    const confirm = await global.$confirm('确定操作吗?');
    return new Promise((resolve, reject) => {
        if (confirm) {
            // 点击确认按钮时设置tags值
            tags.value = 'confirmStatus'
            return resolve(confirm)
        } else {
            return reject(confirm)
        }
    })
}

const changStatus = async (type: string, goodsId: string) => {
    // 判断tags值 这样就不会进页面时调用了
    if (tags.value == 'confirmStatus') {
        const res = await upAndDownApi({
            goodsId: goodsId,
            status: type
        }).catch(() => { })
        if (res && res.code == 200) {
            // 刷新表格
            getGoodsList()
        }
    }
}
</script>

@/hooks/comInstance代码 全局封装getCurrentInstance()方法

getCurrentInstance()方法是Vue3 Composition API中的一个API函数。它的作用是返回一个组件实例对象,可以用来操作当前组件的各种属性和方法。这个方法是一个全局API,可以在任何地方使用。

javascript 复制代码
import { getCurrentInstance, ComponentInternalInstance } from "vue";

// 获取挂载属性
export default function useInstance() {
    const { appContext, proxy } = getCurrentInstance() as ComponentInternalInstance
    const global = appContext.config.globalProperties;
    return {
        proxy,
        global
    }
}
相关推荐
中微子39 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
vvilkim2 小时前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript
写不出来就跑路2 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区2 小时前
盘点字体性能优化方案
前端·javascript
FogLetter2 小时前
深入浅出React Hooks:useEffect那些事儿
前端·javascript