element-plus中 el-switch组件初始化执行change方法（已解决！）

最新推荐文章于 2024-04-29 10:42:46 发布

邱志刚

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量6.8k

点赞数 6

分类专栏： vue3.2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42957741/article/details/128255636

版权

vue3.2 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

注意看element-plus文档，
在这里插入图片描述

 <el-switch
           v-model="scopeData.row.id"
            active-color="#2ed573"
            inactive-color="#5352ed"
            active-value="10020"
            inactive-value="100"
            :before-change="beforeSwitchChange"
            @change="switchChange"
 />

change方法 监听里面加个判断条件，就能解决初始化执行方法问题。
// 启用状态
<script lang="ts" setup name="Productinformation">
		interface switchType {
		    switchStatus: Boolean;
		}
		let switchState = reactive<switchType>({
		    switchStatus: false,
		});
		const beforeSwitchChange = (val: any) => {
		    switchState.switchStatus = true;
		    return switchState.switchStatus;
		};
		const switchChange = (val: string) => {
		    if (switchState.switchStatus) {
		        console.log(val, "开关");
		    }
		};
</script>