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

大红袍不是绿茶.2024-01-12 22:22

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