switch组件修改-change事件没有同步修改绑定值问题

src/components/GuipSwitch.vue

@@ -1,13 +1,14 @@
 <template>
-    <el-form-item>
+    <el-form-item :prop="prop" :label="label" :rules="rules">
         <div class="switchWrap">
-            <span :class="['switchDesc',{'fl':float =='left'},{'fr':float =='right'}]" v-if="activeText || inactiveText">
+            <span :class="['switchDesc', { 'fl': float == 'left' }, { 'fr': float == 'right' }]"
+                v-if="activeText || inactiveText">
                 {{ internalValue === activeValue ? activeText : inactiveText
                 }}</span>
 
-            <el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" v-bind="$attrs"
-                :disabled="disabled || loading" :active-value="activeValue"
-                :inactive-value="inactiveValue" @change="handleChange">
+            <el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor"
+                v-bind="$attrs" :disabled="disabled" :active-value="activeValue" :inactive-value="inactiveValue"
+                @change="handleChange">
                 <!-- 自定义开启时的图标 -->
                 <template #active-icon>
                 </template>
@@ -17,18 +18,20 @@
             </el-switch>
         </div>
     </el-form-item>
-
 </template>
-<!-- 他这个描述文案不太符合当前使用暂且不用 -->
-<!-- :active-text="activeText" 
-:inactive-text="inactiveText"  -->
-<!-- 设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。 -->
 
 <script>
-
 export default {
-    name: 'CustomSwitch',
+    name: 'GuipSwitchå',
+    inheritAttrs: false,
     props: {
+        // modelValue: { type: [Boolean, String, Number], default: undefined },
+        value: { type: [Boolean, String, Number], default: undefined },
+        prop: String,
+        label: String,
+        rules: Array,
+        labelWidth: String,
+      
         activeText: {
             type: String,
             default: '',
@@ -37,17 +40,13 @@ export default {
             type: String,
             default: '',
         },
-        modelValue: {
-            type: [Boolean,String,Number],
-            default: false,
-        },
         activeValue: {
-            type: [Boolean,String,Number],
-            default: '',
+            type: [Boolean, String, Number],
+            default: true,
         },
         inactiveValue: {
-            type: [Boolean,String,Number],
-            default: '',
+            type: [Boolean, String, Number],
+            default: false,
         },
         activeColor: {
             type: String,
@@ -66,58 +65,64 @@ export default {
             default: false,
         },
     },
-    emits: ['update:modelValue', 'change'],
     data() {
         return {
-            internalValue: this.modelValue,
-            loading: false, // 加载状态
-        };
+            internalValue: this.value,
+            errorMsg: ''
+        }
+    },
+    computed: {
+        // internalValue: {
+        //     get() {
+        //         return this.modelValue !== undefined ? this.modelValue : this.value
+        //     },
+        //     set(val) {
+        //         this.$emit('update:modelValue', val)
+        //         this.$emit('input', val)
+        //     }
+        // }
     },
     watch: {
         value(newVal) {
-            this.internalValue = newVal;
-        },
-        modelValue(newVal) {
-            this.internalValue = newVal;
-        },
-        internalValue(newVal) {
-            this.internalValue = newVal;
-            this.$emit('input', newVal);
+            this.internalValue = newVal
         },
+        // modelValue(newVal) {
+        //     this.internalValue = newVal
+        // },
     },
     methods: {
-        // 处理 switch 状态变化
-        async handleChange(value) {
-            this.loading = true;
-            try {
-                // 模拟异步操作
-                await new Promise((resolve) => setTimeout(resolve, 100));
-                this.internalValue = value;
-                this.$emit('update:modelValue', value);
-                this.$emit('change', value);
-            } catch (error) {
-                console.error('操作失败:', error);
-            } finally {
-                this.loading = false;
-            }
+        handleChange(val) {
+            // this.$emit('update:modelValue', val)
+            this.$emit('input', val)
+            this.$emit('change', val)
+            this.validateField()
         },
-    },
-    components: {
-    },
-};
+        validateField() {
+            if (this.prop && this.$parent.validateField) {
+                this.$parent.validateField(this.prop, (error) => {
+                    this.errorMsg = error || ''
+                })
+            }
+        }
+    }
+}
 </script>
+
 <style scoped>
 .switchWrap {
     /* align-items: center; */
 }
-.fl{
+
+.fl {
     float: left;
     margin-right: 12px;
 }
-.fr{
+
+.fr {
     float: right;
     margin-left: 12px;
 }
+
 .switchDesc {
     font-size: 12px;
     font-weight: normal;
@@ -128,4 +133,10 @@ export default {
     color: #626573;
     display: inline-block;
 }
+
+.error-msg {
+    color: #f56c6c;
+    font-size: 12px;
+    margin-left: 10px;
+}
 </style>

src/views/elementGroups.vue

@@ -133,9 +133,11 @@
 
                         </el-table-column>
                         <el-table-column prop="name2" label="姓名" width="150"></el-table-column>
-                        <el-table-column prop="price" label="价格" width="150">
+                        <el-table-column prop="statu" label="价格" width="150">
                             <template slot-scope="scope">
-                                <span @click="handlePriceClick(scope.row)">{{ scope.row.price }}元</span>
+                                <GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭" :active-value="1" :inactive-value="0"
+                                    @change="onSwitchChange1(scope.row)">
+                                </GuipSwitch>
                             </template>
                         </el-table-column>
                         <el-table-column prop="address" label="地址1" width="150"> </el-table-column>
@@ -373,7 +375,7 @@
                     <label for="">开关L</label>
                     <!-- active-value 开启状态的值 -->
                     <!-- inactive-value 关闭状态的值 -->
-                    <GuipSwitch :modelValue="switchValue" activeText="默认类型boolean" inactiveText="关闭"
+                    <GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭" :active-value="true" :inactive-value="false"
                         @change="onSwitchChange">
                     </GuipSwitch>
                 </div>
@@ -386,12 +388,13 @@
                 </div>
                 <div class="ele-item">
                     <label for="">开关L</label>
-                    <GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number"
+                    <GuipSwitch v-model="switchValue1" :active-value="1" :inactive-value="0" activeText="number"
                         @change="onSwitchChange">
                     </GuipSwitch>
-                    <GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string"
+                    <GuipSwitch v-model="form.switchValue2" active-value="0" inactive-value="1" activeText="string"
                         @change="onSwitchChange">
                     </GuipSwitch>
+                    <p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
                 </div>
                 <div class="flex ele-item">
                     <label for="">input、drop组合使用(默认使用)</label>
@@ -691,6 +694,7 @@ export default {
             timer: null,
             date1: '',
             switchValue: true,
+            switchValue3: true,
             switchValue1: 1,
             switchValue2: '0',
             dialogVisible1: false,
@@ -701,6 +705,8 @@ export default {
             form: {
                 username: '',
                 language: '',
+                switchValue3:true,
+                switchValue2: '0',
                 domain_set: '',
                 domainSuffix: '11',
                 domainSuffix1: '.chachongz.com',
@@ -775,6 +781,7 @@ export default {
                 address: '上海市普陀区金沙江路 1518 弄',
                 price: '20',
                 age: 20,
+                statu:1,
                 // 在支持修改的项目中，需要主动保留一份原始数据
                 edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
             }, {
@@ -783,6 +790,8 @@ export default {
                 address: '上海市普陀区金沙江路 151811 弄',
                 price: '10',
                 age: 30,
+                statu:1,
+
                 edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
 
             }, {
@@ -790,6 +799,7 @@ export default {
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1518 弄',
                 price: '200',
+                statu:0,
             }, {
                 date: '2016-05-01',
                 name: '王小虎',
@@ -978,6 +988,10 @@ export default {
         }
     },
     methods: {
+        switchChange(value){
+            console.log(value,'====value');
+            console.log(this.switchValue1,'===uuuu');
+        },
         handleEvent(data){
             console.log(data,'data')
         },
@@ -1124,10 +1138,17 @@ export default {
             return randomNumber
         },
         onSwitchChange(value) {
-            console.log('Switch 状态变化:', this.switchValue, value);
+            console.log('Switch/ 状态变化:',this.switchValue, value);
+            // console.log('Switch 状态变化:',this.form.switchValue2,this.form.switchValue3, value);
+        },
+        onSwitchChange1(value) {
+            // 操作表格内的 看一下是否同步修改了
+            // console.log(this.tableData2,value,'this.tableData2===');
+            console.log('Switch/ 状态变化:', value.statu);
         },
         // 弹框相关方法---start
         openDialog() {
+            console.log(this.switchValue1,'switchValue1');
             this.dialogVisible = true;
         },
         openDialog1() {
@@ -1188,7 +1209,7 @@ export default {
             console.log(data, 'radio--data');
         },
         selectChangeTest(val){
-            console.log(val,'select-----选中的');
+            console.log(val,'select-----选中的',this.form.card,this.form.card1);
         },
         handleClick(row) {
             console.log(row);