封装开关组件、表格、输入框、单选框增加属性

src/components/GuipDialog.vue

@@ -8,16 +8,17 @@
     >
         <!-- 自定义内容 -->
         <slot></slot>
-  
         <!-- 底部按钮 -->
-      <span slot="footer" class="dialog-footer flex">
+        <span slot="footer" class="dialog-footer flex" style="justify-content: space-between;">
-        <el-button v-if="showCancelButton" @click="handleCancel">{{ cancelText }}</el-button>
+            <GuipButton v-if="showCancelButton" @click="handleCancel" type="mild" >{{ cancelText }}</GuipButton>
-        <el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
+            <GuipButton type="primary" @click="handleConfirm">{{ confirmText }}</GuipButton>
         </span>
     </el-dialog>
   </template>
   
   <script>
+  import GuipButton from '@/components/GuipButton.vue';
+
   export default {
     name: 'CustomDialog',
     props: {
@@ -34,7 +35,7 @@
       // 弹框宽度
       width: {
         type: String,
-        default: '30%',
+        default: '599px',
       },
         // 是否显示右上角关闭按钮
         showCloseButton: {
@@ -57,6 +58,9 @@
         default: '确定',
       },
     },
+    components:{
+        GuipButton
+    },
     computed: {
         dialogShow: {
             get() {
@@ -107,8 +111,15 @@
   };
   </script>
   
-  <style scoped>
+  <style scoped lang="scss"> 
-  .dialog-footer {
+  .el-dialog{
-    text-align: right;
+    /* width: 599px; */
+    // min-height: 344px;
+    // .el-dialog__header{
+    //     padding: 32px 32px 12px;
+    // }
+    // .el-dialog__body{
+    //     padding: 0 32px 32px;
+    // }
   }
   </style>

src/components/GuipInput.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item 
-  :style="{...style,height:height,...styleObject}"
+  :style="{height:height,...styleObject}"
   :class="[{'column':column},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']"
   :label="label" :prop="prop" :rules="rules">
   <p v-if="desc" class="desc_right">{{ desc }}</p>
@@ -37,6 +37,8 @@
       <!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> -->
       <!-- <el-button slot="append" v-if="hasBtn"  type="primary" @click="$emit('enter',value)">搜索</el-button> -->
     </el-input>
+    <!-- 单位 -->
+  <span class="unit" v-if="unit">{{ unit }}</span>
   </el-form-item>
 
  </template>
@@ -46,7 +48,7 @@
    name: 'GuipInput',
    props:['styleObject','disabled','defaultValue','placeholder',
    'maxlength','minLength','clear','width','height','showWordLimit',
-   'label','type','prop','rules','column','addClass','desc'],
+   'label','type','prop','rules','column','addClass','desc','unit'],
    data() {
        return {
            value: '',
@@ -131,4 +133,11 @@
  }
  </script>
  <style lang="scss" scoped>
+ .unit {
+  position: absolute;
+  right: 12px; /* 根据需要调整位置 */
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none; /* 防止单位文本影响输入框的点击事件 */
+}
 </style>

src/components/GuipRadio.vue

@@ -12,7 +12,9 @@
           :label="option.value"
           :disabled="option.disabled"
         >
-          {{ option.label }}
+        <!-- 默认展示和选中显示 不同文案 -->
+          {{ selectedValue === option.value ? option.selectedLabel : option.label }}
+          <!-- 自定义 选中图标 -->
           <!-- <template #label>
             <span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
           </template> -->

src/components/GuipSwitch.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="flex switchWrap">
+        <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText }}</span>
+        <el-switch 
+            v-model="internalValue" 
+            :active-color="activeColor" 
+            :inactive-color="inactiveColor"
+            :disabled="disabled || loading"
+            @change="handleChange">
+            <!-- 自定义开启时的图标 -->
+            <template #active-icon>
+            </template>
+            <!-- 自定义关闭时的图标 -->
+            <template #inactive-icon>
+            </template>
+        </el-switch>
+    </div>
+</template>
+<!-- 他这个描述文案不太符合当前使用暂且不用 -->
+<!-- :active-text="activeText" 
+:inactive-text="inactiveText"  -->
+
+<script>
+
+export default {
+    name: 'CustomSwitch',
+    props: {
+        activeText: {
+            type: String,
+            default: '',
+        },
+        inactiveText: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+        activeColor: {
+            type: String,
+            default: '#00C261',
+        },
+        inactiveColor: {
+            type: String,
+            default: '#BABDC2',
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ['update:modelValue', 'change'],
+    data() {
+        return {
+            internalValue: this.modelValue,
+            loading: false, // 加载状态
+        };
+    },
+    watch: {
+        modelValue(newVal) {
+            this.internalValue = newVal;
+        },
+    },
+    methods: {
+        // 处理 switch 状态变化
+        async handleChange(value) {
+            this.loading = true;
+            try {
+                // 模拟异步操作
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+                this.internalValue = value;
+                this.$emit('update:modelValue', value);
+                this.$emit('change', value);
+            } catch (error) {
+                console.error('操作失败:', error);
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+    components: {
+    },
+};
+</script>
+<style scoped>
+.switchWrap{
+    align-items: center;
+}
+.switchDesc{
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 13px;
+    letter-spacing: 0.08em;
+    font-variation-settings: "opsz" auto;
+    /* text/text_3 */
+    color: #626573; 
+    display: inline-block;
+    margin-right: 15px;
+}
+</style>

src/components/GuipTable.vue

@@ -1,16 +1,9 @@
 <template>
- <el-table
+  <el-table ref="guiptable" :data="tableData" height="250" :border="border" @selection-change="handleSelectionChange"
- ref="guiptable"
+    :style="{ width: width ? width : '100%' }">
-    :data="tableData"
-    height="250"
-    :border="border"
-    @selection-change="handleSelectionChange"
-    :style="{width: width? width :'100%'}">
     <!-- 多选 -->
     <template v-if="multiple">
-        <el-table-column
+      <el-table-column type="selection" width="55">
-          type="selection"
-          width="55">
       </el-table-column>
     </template>
     <!-- 自定义header -->
@@ -19,34 +12,75 @@
     </template>
     <!-- 通过json数据遍历渲染 -->
     <template v-if="columns">
-        <el-table-column
+      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
-            v-for="column in columns"
-            :key="column.prop"
-            :prop="column.prop"
-            :label="column.label"
         :width="column.width">
+        <template #default="{ row }" v-if="column.popover">
+          <el-popover :visible="row[`popoverVisible_${column.prop}`]" class="tablePopover" placement="top" trigger="click">
+            <!-- 自定义内容插槽 -->
+            <slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
+              <div>
+                <p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
+                <el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
+              </div>
+            </slot>
+            <!-- 确定和取消按钮 -->
+            <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
+              <GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
+              <GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
+            </div>
+            <!-- 单元格内容 -->
+            <template #reference>
+              <span style="cursor: pointer">{{ row[column.prop] }}</span>
+            </template>
+          </el-popover>
+        </template>
+
       </el-table-column>
     </template>
 
 
+
   </el-table>
- </template>
+</template>
+
+<script>
+import GuipButton from '@/components/GuipButton.vue';
 
- <script>
+export default {
- export default {
   name: 'GuipTextarea',
-    props:['tableData','width','autoColumn','columns','border','multiple'],
+  props: ['tableData', 'width', 'autoColumn', 'columns', 'border', 'multiple'],
   data() {
     return {
 
     }
   },
-    methods:{
+  components: {
-      handleSelectionChange(row){
+    GuipButton
+  },
+  mounted(){
+  },
+  methods: {
+    handleSelectionChange(row) {
       // 获取的当前行信息
-        console.log(row,'======');
+      console.log(row, '======');
-        this.$emit('selectChange',row)
+      this.$emit('selectChange', row)
-      }
+    },
-    }
+    // 点击确定按钮
+    handleConfirm(row, prop) {
+      // 将编辑后的值同步到原始数据
+      row[prop] = row[`edit_${prop}`];
+      row[`popoverVisible_${prop}`] = false; // 关闭气泡框
+      this.$emit('confirm', row, prop); // 触发确认事件
+    },
+    // 点击取消按钮
+    handleCancel(row, prop) {
+      // 恢复原始数据
+      row[`edit_${prop}`] = row[prop];
+      row[`popoverVisible_${prop}`] = false; // 关闭气泡框
+      this.$emit('cancel', row, prop); // 触发取消事件
+    },
   }
- </script>
+}
+</script>
+<style scoped>
+</style>

src/style/theme/common.scss

@@ -2,6 +2,10 @@
 body{
     font-family: Microsoft YaHei UI;
     font-size: 14px;
+    p{
+        margin: 0;
+        padding: 0;
+    }
 }
 /* button==== start */
 
@@ -307,12 +311,54 @@ body{
 // table end
 
 // dialog--start
+.el-dialog{
+    min-height: 344px;
+    max-height: 550px;
+    border-radius: 4px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
+    display: flex;
+    flex-direction: column;
+    .el-dialog__header{
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 26px;
+        letter-spacing: 0.08em;
+        color: #1F2026;
+        padding: 32px 32px 12px;
+    }
+    .el-dialog__body{
+        padding: 0 32px 32px;
+        flex: 1;
+    }
+}
 .el-dialog__footer{
     display: flex;
     justify-content: center;
+    padding: 0 32px 32px !important;
+    .dialog-footer{
+        width: 100%;
+        justify-content: space-between;
+    }
+    button{
+        width: 247px;
+        height: 44px;
+    }
 }
 // dialog--end
 
+// switch --start
+// .el-switch__core{
+//     background-color: #00C261;
+// }
+// .el-switch.is-checked .el-switch__core{
+//     background-color: #BABDC2;
+// }
+// switch --end
+
+.el-popover{
+    padding: 32px;
+}
 .flex{
     display: flex;
     align-items: center;

src/views/elementGroups.vue

@@ -5,64 +5,58 @@
 
             <div class="ele-item">
                 <label for="">单选框：</label>
-            <GuipRadio 
+                <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
-            v-model="form.language"
+                    @change="radioChange" :rules="rules.language" />
-            :options="languageOptions"
-            label="选择语言"
-            prop="language"
-            @change="radioChange"
-            :rules="rules.language"/>
             </div>
             <div class="ele-item">
                 <label for="">下拉框：</label>
-            <GuipSelect width="600px"
+                <GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
-            v-model="form.card" label="卡片" prop="card"
+                    defaultValue="选项1" />
-            :options="options" defaultValue="选项1"/>
             </div>
-        <div class="ele-item">
+            <div >
-            <label for="">表格：</label>
+                <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
                 <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
 
-            <GuipTable :tableData="tableData" 
+                <GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
-            ref="multipleTable"
+                    :multiple="true" autoColumn="true" width="900px">
-            @selectChange="handleSelectionChange"
-            :multiple="true"
-            autoColumn="true" width="900px">
                     <template slot="header">
-                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
+                        <el-table-column fixed prop="date" label="日期" width="180"></el-table-column>
                         <el-table-column prop="name" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name1" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name2" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name3" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name4" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name5" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name6" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name7" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name8" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name9" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name11" label="姓名" width="150"></el-table-column>
+                        <el-table-column prop="name12" label="姓名" width="150"></el-table-column>
                         <el-table-column prop="price" label="价格" width="150">
                             <!-- <template slot-scope="scope">
                             <span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
                         </template> -->
                             <!-- 气泡弹出框  后期样式自定义-->
-                        <template slot-scope="scope">
+                            <!-- <template slot-scope="scope">
                                 <el-popover trigger="click" placement="top">
-                            <!-- <p>姓名: {{ scope.row.name }}</p>
-                            <p>住址: {{ scope.row.address }}</p> -->
                                     <input type="text">
                                     <div slot="reference" class="name-wrapper">
                                         <el-tag size="medium">{{ scope.row.price }}</el-tag>
                                     </div>
                                 </el-popover>
-                        </template>
+                            </template> -->
                         </el-table-column>
-                    <el-table-column prop="address" label="地址"> </el-table-column>
+                        <el-table-column prop="address" label="地址" width="200"> </el-table-column>
                         <el-table-column prop="address1" label="地址测试"></el-table-column>
-                    <el-table-column prop="price" label="价格">
+                        <el-table-column prop="price2" label="价格" width="300">
                             <!-- 自定义渲染内容 -->
                             <template slot-scope="scope">
-                            <GuipSelect 
+                                <GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
-                            width="200px"
+                                    prop="card" :options="options" defaultValue="选项1" />
-                            @change="changeSelect(scope.row)"
-                            v-model="form.card" prop="card"
-                            :options="options" defaultValue="选项1"/>
                             </template>
                         </el-table-column>
-                    <el-table-column
+                        <el-table-column fixed="right" label="操作" width="100">
-                    fixed="right"
-                    label="操作"
-                    width="100">
                             <template slot-scope="scope">
                                 <div class="flex">
                                     <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
@@ -73,41 +67,56 @@
                     </template>
                 </GuipTable>
             </div>
+
+            <div >
+                <h3 for="">表格(带气泡框),内容自定义：</h3>
+                <GuipTable :tableData="tableData" :key="random()" ref="multipleTable" @selectChange="handleSelectionChange" :multiple="true"
+                    autoColumn="true" width="900px" :columns="columns" @confirm="onConfirm"
+                    @cancel="onCancel">
+                     <!-- 自定义姓名列的气泡框内容 -->
+                    <template #popover-content-name="{ row, column }">
+                        <div>
+                            <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序"  :prop="column.label" 
+                            placeholder="这是" />
+                        </div>
+                    </template>
+                    <template #popover-content-age="{ row, column }">
+                            <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄"  :prop="column.label" 
+                            placeholder="这是" unit="岁" >
+                            </GuipInput>
+                    </template>
+                    <!-- 自定义地址列的气泡框内容 -->
+                    <template #popover-content-address="{ row, column }">
+                        <div>
+                            <p>自定义内容：{{ column.label }}</p>
+                            <el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
+                                <el-option label="北京市" value="北京市" />
+                                <el-option label="上海市" value="上海市" />
+                                <el-option label="广州市" value="广州市" />
+                            </el-select>
+                        </div>
+                    </template>
+                </GuipTable>
+            </div>
             <div class="ele-item">
                 <label for="">文本域：</label>
-            <GuipTextarea disabled :styleObject="styleObject"/>
+                <GuipTextarea disabled :styleObject="styleObject" />
             </div>
 
 
             <div class="ele-item">
                 <label for="">输入框：</label>
-            <GuipInput
+                <GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
-            ref="GuipInput"
-            width="200px"
-            height="30px"
-            disabled
-            placeholder="这是自定义默认提示语"/>
 
                 <div style="width: 20px;height: 10px;"></div>
 
-            <GuipInput
+                <GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
-            ref="GuipInput"
+                    @change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
-            :styleObject="styleObject1"
+                    placeholder="这是自定义默认提示语" />
-            defaultValue="爱吃麻辣烫"
-            :maxlength="100"
-            @change="handleInput"
-            @blur="handleInput"
-            @input="handleInput"
-            @focus="handleInput"
-            placeholder="这是自定义默认提示语"/>
 
                 <div style="width: 20px;height: 10px;"></div>
 
-            <GuipInput
+                <GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px">
-            :defaultValue="defaultValue"
-            @clear="handleClear"
-            width="400px"
-            >
                     <span slot="prependshow">http:</span>
                     <img slot="prefix" src="../assets/radio_checked.svg" alt="">
                     <!-- 输入框后面小图标 -事件自定义 -->
@@ -118,7 +127,7 @@
                     <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
 
                     <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
-                 <span slot="appendshow" >.checkcopy.com</span>
+                    <span slot="appendshow">.checkcopy.com</span>
                 </GuipInput>
                 <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
             </div>
@@ -138,7 +147,7 @@
             </div>
             <div class="ele-item">
                 <label for="">常规按钮：</label>
-            <GuipButton >默认按钮</GuipButton>
+                <GuipButton>默认按钮</GuipButton>
                 <GuipButton type="mild" size="medium">轻度按钮</GuipButton>
                 <GuipButton type="primary">按钮</GuipButton>
                 <GuipButton type="reverseMild">按钮</GuipButton>
@@ -150,7 +159,7 @@
             </div>
             <div class="ele-item">
                 <label for="">禁用按钮：</label>
-            <GuipButton disabled >默认按钮</GuipButton>
+                <GuipButton disabled>默认按钮</GuipButton>
                 <GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
 
                 <GuipButton type="reverseMild" disabled>按钮</GuipButton>
@@ -162,7 +171,7 @@
             </div>
             <div class="ele-item">
                 <label for="">三种尺寸按钮：</label>
-            <GuipButton type="primary" >默认按钮</GuipButton>
+                <GuipButton type="primary">默认按钮</GuipButton>
                 <GuipButton type="primary" size="medium">中等按钮</GuipButton>
                 <GuipButton type="primary" size="small">小的按钮</GuipButton>
                 <GuipButton type="primary" size="mini">迷你按钮</GuipButton>
@@ -172,47 +181,23 @@
                 <GuipButton type="primary" :btnstyle="btnstyleObj">超长啊扭测试长的长的</GuipButton>
                 <GuipButton type="primary" :btnstyle="btnstyleObj1">随便写的</GuipButton>
             </div>
-        <div class="ele-item">
-            <!-- <label for="">表单校验:</label> -->
-            <!-- <el-form :model="form" :rules="rules" ref="myForm">
-                <el-form-item label="用户名" prop="username">
-                    <el-input v-model="form.username"></el-input>
-                </el-form-item>
-                <div style="display: flex;">
-                    <el-button type="primary" @click="submitForm">提交</el-button>
-                    <el-button @click="triggerError">触发错误</el-button>
-                </div>
-            </el-form> -->
-        </div>
 
             <div style="width: 600px;">
                 <h3>表单左右布局（直接使用封装好的input）</h3>
                 <!-- 表单左右布局 -->
-            <GuipInput
+                <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
-                ref="GuipInput"
+                    :rules="usernameRules" placeholder="这是自定义默认提11示语" />
-                addClass="w510"
-                v-model="form.username" label="Username" prop="username" :rules="usernameRules"
-                placeholder="这是自定义默认提11示语"/>
             </div>
 
             <div style="width: 800px;height: 150px;">
                 <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
-                <GuipInput
+                <GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age"
-                ref="GuipInput"
+                    prop="age" placeholder="这是自定义默认提示语" />
-                column="column"
-                addClass="w510"
-                label="age"
-                desc="这是是右侧文案"
-                v-model="form.age" prop="age" 
-                placeholder="这是自定义默认提示语"/>
             </div>
 
             <div style="width: 600px;height: 150px;">
                 <h3>获取手机验证码(布局也可更改，使用插槽自定义展示内容)</h3>
-            <GuipFormItem
+                <GuipFormItem column="column" addClass="w388">
-            column="column"
-            addClass="w388"
-            >
                     <!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
                     <div slot="formLeft" class="form-top-icon">
                         <img src="../assets/phone-fill.svg" alt="">
@@ -224,7 +209,8 @@
             <el-button type="primary" @click="submitForm">表单Submit</el-button>
 
         </el-form>
-<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">--------------------分割线0------------------------------</div>
+        <div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
+            --------------------分割线0------------------------------</div>
 
         <div style="display: flex;">
             <!-- <GuipButton type="primary" @click="showModal">弹框</GuipButton>
@@ -251,47 +237,53 @@
 
         <el-button type="primary" @click="openDialog">打开弹框</el-button>
 
-        <GuipDialog
+        <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
-            :dialogVisible="dialogVisible"
+            :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
-            title="自定义标题"
+            @dialogVisibleChange="dialogVisibleChange">
-            :show-close-button="showCloseButton"
-            :show-cancel-button="showCancelButton"
-            @confirm="handleConfirm"
-            @cancel="handleCancel"
-            @close="handleClose"
-            @dialogVisibleChange="dialogVisibleChange"
-        >
             <!-- 自定义内容 -->
             <div>
                 <p>这是一个自定义内容的弹框。</p>
-            <el-input placeholder="请输入内容"></el-input>
             </div>
         </GuipDialog>
+
+        <!-- <el-switch v-model="switchValue1" active-text="按月付费" inactive-text="按年付费">
+        </el-switch>
+        <el-switch style="display: block" v-model="switchValue2" active-color="#13ce66" 
+            active-text="按月付费" inactive-text="按年付费">
+        </el-switch> -->
+
+        <div class="ele-item">
+            <label for="">开关L</label>
+            <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
+            </GuipSwitch>
         </div>
-  </template>
+    </div>
+</template>
 
-  <script>
+<script>
 
 import { rules } from "../assets/vabForm";
-  // @ is an alias to /src
+// @ is an alias to /src
-  import GuipFormItem from '@/components/GuipFormItem.vue';
+import GuipSwitch from '@/components/GuipSwitch.vue';
-  import GuipDialog from '@/components/GuipDialog.vue';
+import GuipFormItem from '@/components/GuipFormItem.vue';
-  import GuipRadio from '@/components/GuipRadio.vue';
+import GuipDialog from '@/components/GuipDialog.vue';
+import GuipRadio from '@/components/GuipRadio.vue';
 //   import GuipForm from '@/components/GuipForm.vue';
-  import PhoneCode from '@/components/PhoneCode.vue';
+import PhoneCode from '@/components/PhoneCode.vue';
-  import GuipButton from '@/components/GuipButton.vue';
+import GuipButton from '@/components/GuipButton.vue';
 //   import GuipConfirm from '@/components/GuipConfirm.vue';
-  import GuipInput from '@/components/GuipInput.vue';
+import GuipInput from '@/components/GuipInput.vue';
 //   import GuipModal from '@/components/GuipModal.vue';
-  import GuipSelect from '@/components/GuipSelect.vue';
+import GuipSelect from '@/components/GuipSelect.vue';
-  import GuipTable from '@/components/GuipTable.vue';
+import GuipTable from '@/components/GuipTable.vue';
-  import GuipTextarea from '@/components/GuipTextarea.vue'
+import GuipTextarea from '@/components/GuipTextarea.vue'
 
-  export default {
+export default {
     name: 'HomeView',
     components: {
         GuipTextarea,
         GuipTable,
+        GuipSwitch,
         // GuipForm,
         GuipDialog,
         GuipRadio,
@@ -303,21 +295,21 @@ import { rules } from "../assets/vabForm";
         // GuipModal,
         GuipSelect
     },
-    data(){
+    data() {
         return {
+            switchValue: true,
             dialogVisible: false,//是否展示弹框
             showCancelButton: true, // 控制是否显示取消按钮
             showCloseButton: true, // 控制是否显示关闭按钮
-            // inputValue: '',
             form: {
                 username: '',
-                language:'',
+                language: '',
             },
             languageOptions: [
-                { label: 'JavaScript', value: 'js' },
+                { label: 'JavaScript', value: 'js',selectedLabel:'JavaScripthhhhhhhhhh' },
-                { label: 'Python', value: 'py' },
+                { label: 'Python', value: 'py',selectedLabel:'JavaScripthhhhhhhhhh'  },
-                { label: 'Java', value: 'java', disabled: true }, // 禁用选项
+                { label: 'Java', value: 'java', disabled: true,selectedLabel:'JavaScripthhhhhhhhhh' }, // 禁用选项
-                { label: 'Go', value: 'go' },
+                { label: 'Go', value: 'go' ,selectedLabel:'JavaScripthhhhhhhhhh' },
             ],
             rules: {
                 username: [
@@ -336,7 +328,7 @@ import { rules } from "../assets/vabForm";
                     { required: true, message: '请输入年龄', trigger: 'blur' }
                 ]
             },
-            usernameRules:[{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
+            usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
             msg: "测试",
             title: "相关附件",
             edit: false,
@@ -367,6 +359,51 @@ import { rules } from "../assets/vabForm";
                     },
                 ],
             },
+            // 表格数据
+            tableData: [{
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄',
+                price: '20',
+                age:20,
+                // 在支持修改的项目中，需要主动保留一份原始数据
+                edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-02',
+                name: '王小虎11',
+                address: '上海市普陀区金沙江路 151811 弄',
+                price: '10',
+                age:30,
+                edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
+
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄',
+                price: '200',
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-08',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-06',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-07',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }],
+            // 表格列配置
+            columns: [
+                { prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框
+                { prop: 'age', label: '年龄', popover: true }, // 不支持气泡框
+                { prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框
+            ],
             optionss: [
                 {
                     value: "选项1",
@@ -415,83 +452,65 @@ import { rules } from "../assets/vabForm";
                     label: "广州",
                 }
             ],
-            input:'hahhahah',
+            input: 'hahhahah',
-            defaultValue:'asdasda',
+            defaultValue: 'asdasda',
-            radio:3,
+            radio: 3,
-            radio1:5,
+            radio1: 5,
-            btnstyleObj:{
+            btnstyleObj: {
                 width: '247px',
                 height: '44px',
                 background: '#F2F7FF',
                 borderRadius: '2px',
-                fontSize:'14px',
+                fontSize: '14px',
                 letterSpacing: '0.08em',
                 color: '#006AFF !important'
             },
-            btnstyleObj1:{
+            btnstyleObj1: {
                 width: '180px',
                 height: '40px',
             },
-            styleObject:{
+            styleObject: {
-                width:'200px',
+                width: '200px',
-                height:'40px'
+                height: '40px'
             },
-            styleObject1:{
+            styleObject1: {
-                width:'600px',
+                width: '600px',
-                height:'50px'
+                height: '50px'
             },
-            plain:false,
+            plain: false,
-            tableData: [{
+            
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄',
-                price:'20',
-                }, {
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄',
-                price:'10',
-                }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄',
-                price:'200',
-                }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-                }, {
-                date: '2016-05-08',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-                }, {
-                date: '2016-05-06',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-                }, {
-                date: '2016-05-07',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-                }],
             options: [{
                 value: '选项1',
+                label1:'黄金hhhhhh',
                 label: '黄金糕'
             }, {
                 value: '选项2',
+                label1:'双皮奶hhhhhhhhh',
                 label: '双皮奶'
             }, {
                 value: '选项3',
+                label1:'蚵仔煎hhhhhhhhh',
                 label: '蚵仔煎'
             }, {
                 value: '选项4',
+                label1:'双皮奶hhhhhhhhh',
                 label: '龙须面'
             }, {
                 value: '选项5',
+                label1:'双皮奶hhhhhhhhh',
                 label: '北京烤鸭'
             }],
         }
     },
-    methods:{
+    methods: {
+        // 部分情况可能导致页面不更新，增加 key 强制重新渲染
+        random(){
+            var randomNumber = Math.random();
+            return randomNumber
+        },
+        onSwitchChange(value) {
+            console.log('Switch 状态变化:', value);
+        },
         // 弹框相关方法---start
         openDialog() {
             this.dialogVisible = true;
@@ -511,8 +530,8 @@ import { rules } from "../assets/vabForm";
             this.$message.info('弹框已关闭');
             this.dialogVisible = false;
         },
-        dialogVisibleChange(data){
+        dialogVisibleChange(data) {
-            console.log(data,'data098908090');
+            console.log(data, 'data098908090');
         },
         // 弹框相关方法---end
 
@@ -522,16 +541,33 @@ import { rules } from "../assets/vabForm";
             this.editedPrice = row.price;
             this.dialogVisible = true;
         },
+
+        // 表格气泡框-----
+        // 确认事件
+        onConfirm(row, prop) {
+            console.log('确认修改:', row, prop);
+            this.$message.success('修改成功');
+            this.$set(this.tableData,row)
+            console.log(this.tableData,'this.tableData=====');
+        },
+        // 取消事件
+        onCancel(row, prop) {
+            console.log('取消修改:', row, prop);
+            this.$message.info('已取消');
+            this.$set(this.tableData,row)
+        },
+        // 表格气泡框-----
+
         // 监听单选框组变化
-        radioChange(data){
+        radioChange(data) {
-            console.log(data,'radio--data');
+            console.log(data, 'radio--data');
         },
         handleClick(row) {
             console.log(row);
         },
         submitForm() {
             this.$refs.formRef.validate((valid) => {
-                console.log(this.form,'======formxinxi');
+                console.log(this.form, '======formxinxi');
                 if (valid) {
                     alert('提交成功!');
                 } else {
@@ -552,16 +588,16 @@ import { rules } from "../assets/vabForm";
                 }
             });
         },
-        getFormdata(){
+        getFormdata() {
             console.log(this.$refs.GuipInput.value);
         },
-        handleInput(value){
+        handleInput(value) {
-            console.log(value,'value===输入框输入得知');
+            console.log(value, 'value===输入框输入得知');
         },
-        handleClear(value){
+        handleClear(value) {
             this.defaultValue = '这是我清除后给的文案'
             // this.handleInput('')
-            console.log(value,'value===qinghcu');
+            console.log(value, 'value===qinghcu');
         },
         getList() {
             const dataList = rules();
@@ -583,10 +619,10 @@ import { rules } from "../assets/vabForm";
             this.$refs.VabForm.resetForm("ruleForm");
         },
         // 表格点击、选择
-        handleSelectionChange(data){
+        handleSelectionChange(data) {
             // 多选模式下的时候 data 为数组格式
             // 单选的时候是 对象
-            console.log(data,'表格行信息');
+            console.log(data, '表格行信息');
         },
         // 全选按钮
         toggleAllSelection() {
@@ -598,18 +634,20 @@ import { rules } from "../assets/vabForm";
         this.getList();
     },
 
-  }
+}
-  </script>
+</script>
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
-    .elementWrap{
+.elementWrap {
     /* width: 100%; */
     padding: 30px 40px;
-        .ele-item{
+
+    .ele-item {
         display: flex;
         align-items: center;
         justify-content: flex-start;
-            margin-bottom: 30px;
+        margin: 20px 0 30px;
-            label{
+
+        label {
             font-size: 16px;
             font-weight: bold;
             width: 100px;
@@ -617,7 +655,7 @@ import { rules } from "../assets/vabForm";
             text-align: left;
         }
     }
-    }
+}
 
 
 .ScaleBox {
@@ -629,13 +667,13 @@ import { rules } from "../assets/vabForm";
     transform-origin: 0 0;
     margin: 0 auto;
 }
+
 .cardfooter {
     width: 100%;
-//   position: fixed;
+    //   position: fixed;
     bottom: 20px;
     right: 30px;
     text-align: right;
     justify-content: center;
 }
 </style>
-