From 49ed7dbdd176c5b89b8a192401406fb86f9b0f33 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 27 Feb 2025 17:49:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E5=BC=80=E5=85=B3=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E3=80=81=E8=A1=A8=E6=A0=BC=E3=80=81=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E3=80=81=E5=8D=95=E9=80=89=E6=A1=86=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GuipDialog.vue |  35 +-
 src/components/GuipInput.vue  |  13 +-
 src/components/GuipRadio.vue  |   4 +-
 src/components/GuipSwitch.vue | 101 ++++++
 src/components/GuipTable.vue  | 126 ++++---
 src/style/theme/common.scss   |  46 +++
 src/views/elementGroups.vue   | 816 ++++++++++++++++++++++--------------------
 7 files changed, 691 insertions(+), 450 deletions(-)
 create mode 100644 src/components/GuipSwitch.vue

diff --git a/src/components/GuipDialog.vue b/src/components/GuipDialog.vue
index 851b853..0fcb2dd 100644
--- a/src/components/GuipDialog.vue
+++ b/src/components/GuipDialog.vue
@@ -6,18 +6,19 @@
         :show-close="showCloseButton"
         :before-close="handleClose"
     >
-      <!-- 自定义内容 -->
-      <slot></slot>
-  
-      <!-- 底部按钮 -->
-      <span slot="footer" class="dialog-footer flex">
-        <el-button v-if="showCancelButton" @click="handleCancel">{{ cancelText }}</el-button>
-        <el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
-      </span>
+        <!-- 自定义内容 -->
+        <slot></slot>
+        <!-- 底部按钮 -->
+        <span slot="footer" class="dialog-footer flex" style="justify-content: space-between;">
+            <GuipButton v-if="showCancelButton" @click="handleCancel" type="mild" >{{ cancelText }}</GuipButton>
+            <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>
-  .dialog-footer {
-    text-align: right;
+  <style scoped lang="scss"> 
+  .el-dialog{
+    /* width: 599px; */
+    // min-height: 344px;
+    // .el-dialog__header{
+    //     padding: 32px 32px 12px;
+    // }
+    // .el-dialog__body{
+    //     padding: 0 32px 32px;
+    // }
   }
   </style>
\ No newline at end of file
diff --git a/src/components/GuipInput.vue b/src/components/GuipInput.vue
index baf2ece..545b9ec 100644
--- a/src/components/GuipInput.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/GuipRadio.vue b/src/components/GuipRadio.vue
index d2ecd50..e40b28e 100644
--- a/src/components/GuipRadio.vue
+++ b/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> -->
diff --git a/src/components/GuipSwitch.vue b/src/components/GuipSwitch.vue
new file mode 100644
index 0000000..dfad417
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/GuipTable.vue b/src/components/GuipTable.vue
index 6048c01..cda0abf 100644
--- a/src/components/GuipTable.vue
+++ b/src/components/GuipTable.vue
@@ -1,52 +1,86 @@
 <template>
- <el-table
- ref="guiptable"
-    :data="tableData"
-    height="250"
-    :border="border"
-    @selection-change="handleSelectionChange"
-    :style="{width: width? width :'100%'}">
-      <!-- 多选 -->
-      <template v-if="multiple">
-        <el-table-column
-          type="selection"
-          width="55">
-        </el-table-column>
-      </template>
+  <el-table ref="guiptable" :data="tableData" height="250" :border="border" @selection-change="handleSelectionChange"
+    :style="{ width: width ? width : '100%' }">
+    <!-- 多选 -->
+    <template v-if="multiple">
+      <el-table-column type="selection" width="55">
+      </el-table-column>
+    </template>
     <!-- 自定义header -->
-      <template v-if="autoColumn">
-        <slot name="header"></slot>
-      </template>
-      <!-- 通过json数据遍历渲染 -->
-      <template v-if="columns">
-        <el-table-column
-            v-for="column in columns"
-            :key="column.prop"
-            :prop="column.prop"
-            :label="column.label"
-            :width="column.width">
-          </el-table-column>
-      </template>
+    <template v-if="autoColumn">
+      <slot name="header"></slot>
+    </template>
+    <!-- 通过json数据遍历渲染 -->
+    <template v-if="columns">
+      <el-table-column 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>
-  
- <script>
- export default {
-    name: 'GuipTextarea',
-    props:['tableData','width','autoColumn','columns','border','multiple'],
-    data() {
-      return {
+</template>
+
+<script>
+import GuipButton from '@/components/GuipButton.vue';
+
+export default {
+  name: 'GuipTextarea',
+  props: ['tableData', 'width', 'autoColumn', 'columns', 'border', 'multiple'],
+  data() {
+    return {
 
-      }
-    },
-    methods:{
-      handleSelectionChange(row){
-        // 获取的当前行信息
-        console.log(row,'======');
-        this.$emit('selectChange',row)
-      }
     }
- }
- </script>
\ No newline at end of file
+  },
+  components: {
+    GuipButton
+  },
+  mounted(){
+  },
+  methods: {
+    handleSelectionChange(row) {
+      // 获取的当前行信息
+      console.log(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>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index d5706c1..b0d7b5b 100644
--- a/src/style/theme/common.scss
+++ b/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;
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 8d319b4..09732a8 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -1,230 +1,216 @@
 <template>
     <div class="elementWrap">
         <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
-        <el-form :model="form" :rules="rules"  class="el-row demo-ruleForm" ref="formRef">
-        
-        <div class="ele-item">
-            <label for="">单选框：</label>
-            <GuipRadio 
-            v-model="form.language"
-            :options="languageOptions"
-            label="选择语言"
-            prop="language"
-            @change="radioChange"
-            :rules="rules.language"/>
-        </div>
-        <div class="ele-item">
-            <label for="">下拉框：</label>
-            <GuipSelect width="600px"
-            v-model="form.card" label="卡片" prop="card"
-            :options="options" defaultValue="选项1"/>
-        </div>
-        <div class="ele-item">
-            <label for="">表格：</label>
-            <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
-
-            <GuipTable :tableData="tableData" 
-            ref="multipleTable"
-            @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 prop="name" label="姓名" width="150"></el-table-column>
-                    <el-table-column prop="price" label="价格" width="150">
-                        <!-- <template slot-scope="scope">
+        <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
+
+            <div class="ele-item">
+                <label for="">单选框：</label>
+                <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
+                    @change="radioChange" :rules="rules.language" />
+            </div>
+            <div class="ele-item">
+                <label for="">下拉框：</label>
+                <GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
+                    defaultValue="选项1" />
+            </div>
+            <div >
+                <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
+                <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
+
+                <GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
+                    :multiple="true" autoColumn="true" width="900px">
+                    <template slot="header">
+                        <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">
-                            <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>
-                    </el-table-column>
-                    <el-table-column prop="address" label="地址"> </el-table-column>
-                    <el-table-column prop="address1" label="地址测试"></el-table-column>
-                    <el-table-column prop="price" label="价格">
-                        <!-- 自定义渲染内容 -->
-                        <template slot-scope="scope">
-                            <GuipSelect 
-                            width="200px"
-                            @change="changeSelect(scope.row)"
-                            v-model="form.card" prop="card"
-                            :options="options" defaultValue="选项1"/>
+                            <!-- 气泡弹出框  后期样式自定义-->
+                            <!-- <template slot-scope="scope">
+                                <el-popover trigger="click" placement="top">
+                                    <input type="text">
+                                    <div slot="reference" class="name-wrapper">
+                                        <el-tag size="medium">{{ scope.row.price }}</el-tag>
+                                    </div>
+                                </el-popover>
+                            </template> -->
+                        </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="price2" label="价格" width="300">
+                            <!-- 自定义渲染内容 -->
+                            <template slot-scope="scope">
+                                <GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
+                                    prop="card" :options="options" defaultValue="选项1" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="100">
+                            <template slot-scope="scope">
+                                <div class="flex">
+                                    <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
+                                    <el-button type="text">编辑</el-button>
+                                </div>
+                            </template>
+                        </el-table-column>
                     </template>
-                    </el-table-column>
-                    <el-table-column
-                    fixed="right"
-                    label="操作"
-                    width="100">
-                    <template slot-scope="scope">
-                        <div class="flex">
-                            <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
-                            <el-button type="text">编辑</el-button>
+                </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>
-                    </el-table-column>
-                </template>
-            </GuipTable>
-        </div>
-        <div class="ele-item">
-            <label for="">文本域：</label>
-            <GuipTextarea disabled :styleObject="styleObject"/>
-        </div>
+                    <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" />
+            </div>
 
 
-        <div class="ele-item">
-            <label for="">输入框：</label>
-            <GuipInput
-            ref="GuipInput"
-            width="200px"
-            height="30px"
-            disabled
-            placeholder="这是自定义默认提示语"/>
-
-            <div style="width: 20px;height: 10px;"></div>
-
-            <GuipInput
-            ref="GuipInput"
-            :styleObject="styleObject1"
-            defaultValue="爱吃麻辣烫"
-            :maxlength="100"
-            @change="handleInput"
-            @blur="handleInput"
-            @input="handleInput"
-            @focus="handleInput"
-            placeholder="这是自定义默认提示语"/>
-
-            <div style="width: 20px;height: 10px;"></div>
-
-            <GuipInput
-            :defaultValue="defaultValue"
-            @clear="handleClear"
-            width="400px"
-            >
-            <span slot="prependshow">http:</span>
-                <img slot="prefix" src="../assets/radio_checked.svg" alt="">
-                <!-- 输入框后面小图标 -事件自定义 -->
-                <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
-                <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
-
-                <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
-                <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
-                 
-                <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
-                 <span slot="appendshow" >.checkcopy.com</span>
-            </GuipInput>
-            <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
-        </div>
-        <div class="ele-item">
-            <label for="">单选框：</label>
-            <el-radio  v-model="radio1" :label="1">选项一</el-radio>
-            <el-radio  v-model="radio1" :label="2">选项二</el-radio>
-        </div>
-        
-        <div class="ele-item">
-            <label for="">单选框组：</label>
-            <el-radio-group v-model="radio" @input="radioChange">
-                <el-radio :label="3">备选项</el-radio>
-                <el-radio :label="6">备选项</el-radio>
-                <el-radio :label="9">备选项</el-radio>
-            </el-radio-group>
-        </div>
-        <div class="ele-item">
-            <label for="">常规按钮：</label>
-            <GuipButton >默认按钮</GuipButton>
-            <GuipButton type="mild" size="medium">轻度按钮</GuipButton>
-            <GuipButton type="primary">按钮</GuipButton>
-            <GuipButton type="reverseMild">按钮</GuipButton>
-            <GuipButton type="primary" loading>按钮</GuipButton>
-            <GuipButton type="success" :plain="plain">按钮</GuipButton>
-            <GuipButton type="info" :plain="plain">按钮</GuipButton>
-            <GuipButton type="warning" :plain="plain">按钮</GuipButton>
-            <GuipButton type="danger" :plain="plain">按钮</GuipButton>
-        </div>
-        <div class="ele-item">
-            <label for="">禁用按钮：</label>
-            <GuipButton disabled >默认按钮</GuipButton>
-            <GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
-
-            <GuipButton type="reverseMild" disabled>按钮</GuipButton>
-            <GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
-            <GuipButton type="success" disabled>按钮</GuipButton>
-            <GuipButton type="info" disabled>按钮</GuipButton>
-            <GuipButton type="warning" disabled>按钮</GuipButton>
-            <GuipButton type="danger" disabled>按钮</GuipButton>
-        </div>
-        <div class="ele-item">
-            <label for="">三种尺寸按钮：</label>
-            <GuipButton type="primary" >默认按钮</GuipButton>
-            <GuipButton type="primary" size="medium">中等按钮</GuipButton>
-            <GuipButton type="primary" size="small">小的按钮</GuipButton>
-            <GuipButton type="primary" size="mini">迷你按钮</GuipButton>
-        </div>
-        <div class="ele-item">
-            <label for="">自定义宽高按钮：</label>
-            <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 class="ele-item">
+                <label for="">输入框：</label>
+                <GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
 
-        <div style="width: 600px;">
-            <h3>表单左右布局（直接使用封装好的input）</h3>
-        <!-- 表单左右布局 -->
-            <GuipInput
-                ref="GuipInput"
-                addClass="w510"
-                v-model="form.username" label="Username" prop="username" :rules="usernameRules"
-                placeholder="这是自定义默认提11示语"/>
-        </div>
+                <div style="width: 20px;height: 10px;"></div>
 
-        <div style="width: 800px;height: 150px;">
-            <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
-                <GuipInput
-                ref="GuipInput"
-                column="column"
-                addClass="w510"
-                label="age"
-                desc="这是是右侧文案"
-                v-model="form.age" prop="age" 
-                placeholder="这是自定义默认提示语"/>
-        </div>
+                <GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
+                    @change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
+                    placeholder="这是自定义默认提示语" />
 
-        <div style="width: 600px;height: 150px;">
-            <h3>获取手机验证码(布局也可更改，使用插槽自定义展示内容)</h3>
-            <GuipFormItem
-            column="column"
-            addClass="w388"
-            >
-            <!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
-                <div slot="formLeft" class="form-top-icon">
-                    <img  src="../assets/phone-fill.svg" alt="">
-                    <span>手机号码</span>
-                </div>
-                <PhoneCode slot="formDom"></PhoneCode>
-            </GuipFormItem>
-        </div>
-        <el-button type="primary" @click="submitForm">表单Submit</el-button>
+                <div style="width: 20px;height: 10px;"></div>
+
+                <GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px">
+                    <span slot="prependshow">http:</span>
+                    <img slot="prefix" src="../assets/radio_checked.svg" alt="">
+                    <!-- 输入框后面小图标 -事件自定义 -->
+                    <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
+                    <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
+
+                    <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
+                    <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
+
+                    <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
+                    <span slot="appendshow">.checkcopy.com</span>
+                </GuipInput>
+                <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
+            </div>
+            <div class="ele-item">
+                <label for="">单选框：</label>
+                <el-radio v-model="radio1" :label="1">选项一</el-radio>
+                <el-radio v-model="radio1" :label="2">选项二</el-radio>
+            </div>
 
-    </el-form>
-<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">--------------------分割线0------------------------------</div>
+            <div class="ele-item">
+                <label for="">单选框组：</label>
+                <el-radio-group v-model="radio" @input="radioChange">
+                    <el-radio :label="3">备选项</el-radio>
+                    <el-radio :label="6">备选项</el-radio>
+                    <el-radio :label="9">备选项</el-radio>
+                </el-radio-group>
+            </div>
+            <div class="ele-item">
+                <label for="">常规按钮：</label>
+                <GuipButton>默认按钮</GuipButton>
+                <GuipButton type="mild" size="medium">轻度按钮</GuipButton>
+                <GuipButton type="primary">按钮</GuipButton>
+                <GuipButton type="reverseMild">按钮</GuipButton>
+                <GuipButton type="primary" loading>按钮</GuipButton>
+                <GuipButton type="success" :plain="plain">按钮</GuipButton>
+                <GuipButton type="info" :plain="plain">按钮</GuipButton>
+                <GuipButton type="warning" :plain="plain">按钮</GuipButton>
+                <GuipButton type="danger" :plain="plain">按钮</GuipButton>
+            </div>
+            <div class="ele-item">
+                <label for="">禁用按钮：</label>
+                <GuipButton disabled>默认按钮</GuipButton>
+                <GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
+
+                <GuipButton type="reverseMild" disabled>按钮</GuipButton>
+                <GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
+                <GuipButton type="success" disabled>按钮</GuipButton>
+                <GuipButton type="info" disabled>按钮</GuipButton>
+                <GuipButton type="warning" disabled>按钮</GuipButton>
+                <GuipButton type="danger" disabled>按钮</GuipButton>
+            </div>
+            <div class="ele-item">
+                <label for="">三种尺寸按钮：</label>
+                <GuipButton type="primary">默认按钮</GuipButton>
+                <GuipButton type="primary" size="medium">中等按钮</GuipButton>
+                <GuipButton type="primary" size="small">小的按钮</GuipButton>
+                <GuipButton type="primary" size="mini">迷你按钮</GuipButton>
+            </div>
+            <div class="ele-item">
+                <label for="">自定义宽高按钮：</label>
+                <GuipButton type="primary" :btnstyle="btnstyleObj">超长啊扭测试长的长的</GuipButton>
+                <GuipButton type="primary" :btnstyle="btnstyleObj1">随便写的</GuipButton>
+            </div>
+
+            <div style="width: 600px;">
+                <h3>表单左右布局（直接使用封装好的input）</h3>
+                <!-- 表单左右布局 -->
+                <GuipInput ref="GuipInput" 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 ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age"
+                    prop="age" placeholder="这是自定义默认提示语" />
+            </div>
+
+            <div style="width: 600px;height: 150px;">
+                <h3>获取手机验证码(布局也可更改，使用插槽自定义展示内容)</h3>
+                <GuipFormItem column="column" addClass="w388">
+                    <!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
+                    <div slot="formLeft" class="form-top-icon">
+                        <img src="../assets/phone-fill.svg" alt="">
+                        <span>手机号码</span>
+                    </div>
+                    <PhoneCode slot="formDom"></PhoneCode>
+                </GuipFormItem>
+            </div>
+            <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="display: flex;">
             <!-- <GuipButton type="primary" @click="showModal">弹框</GuipButton>
@@ -251,47 +237,53 @@
 
         <el-button type="primary" @click="openDialog">打开弹框</el-button>
 
-        <GuipDialog
-            :dialogVisible="dialogVisible"
-            title="自定义标题"
-            :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 :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
+            :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
+            @dialogVisibleChange="dialogVisibleChange">
+            <!-- 自定义内容 -->
+            <div>
+                <p>这是一个自定义内容的弹框。</p>
+            </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>
     </div>
-  </template>
-  
-  <script>
-  
+</template>
+
+<script>
+
 import { rules } from "../assets/vabForm";
-  // @ is an alias to /src
-  import GuipFormItem from '@/components/GuipFormItem.vue';
-  import GuipDialog from '@/components/GuipDialog.vue';
-  import GuipRadio from '@/components/GuipRadio.vue';
+// @ is an alias to /src
+import GuipSwitch from '@/components/GuipSwitch.vue';
+import GuipFormItem from '@/components/GuipFormItem.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 GuipButton from '@/components/GuipButton.vue';
+import PhoneCode from '@/components/PhoneCode.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 GuipTable from '@/components/GuipTable.vue';
-  import GuipTextarea from '@/components/GuipTextarea.vue'
-  
-  export default {
+import GuipSelect from '@/components/GuipSelect.vue';
+import GuipTable from '@/components/GuipTable.vue';
+import GuipTextarea from '@/components/GuipTextarea.vue'
+
+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: 'Python', value: 'py' },
-                { label: 'Java', value: 'java', disabled: true }, // 禁用选项
-                { label: 'Go', value: 'go' },
+                { label: 'JavaScript', value: 'js',selectedLabel:'JavaScripthhhhhhhhhh' },
+                { label: 'Python', value: 'py',selectedLabel:'JavaScripthhhhhhhhhh'  },
+                { label: 'Java', value: 'java', disabled: true,selectedLabel:'JavaScripthhhhhhhhhh' }, // 禁用选项
+                { 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,
@@ -359,139 +351,166 @@ import { rules } from "../assets/vabForm";
                 textareaIner: "textarea",
                 dateTime: "2023-09-12 00:00:00",
                 uploadList: [
-                {
-                    name: "小梨猫.jpg",
-                    size: 160517,
-                    uid: 1695291434025,
-                    url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
-                },
+                    {
+                        name: "小梨猫.jpg",
+                        size: 160517,
+                        uid: 1695291434025,
+                        url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
+                    },
                 ],
             },
+            // 表格数据
+            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",
-                label: "黄金糕",
+                    value: "选项1",
+                    label: "黄金糕",
                 },
                 {
-                value: "选项2",
-                label: "双皮奶",
+                    value: "选项2",
+                    label: "双皮奶",
                 },
                 {
-                value: "选项3",
-                label: "蚵仔煎",
+                    value: "选项3",
+                    label: "蚵仔煎",
                 },
                 {
-                value: "选项4",
-                label: "龙须面",
+                    value: "选项4",
+                    label: "龙须面",
                 },
                 {
-                value: "选项5",
-                label: "北京烤鸭",
+                    value: "选项5",
+                    label: "北京烤鸭",
                 },
             ],
             cities: [
                 {
-                value: "Beijing",
-                label: "北京",
+                    value: "Beijing",
+                    label: "北京",
                 },
                 {
-                value: "Shanghai",
-                label: "上海",
+                    value: "Shanghai",
+                    label: "上海",
                 },
                 {
-                value: "Nanjing",
-                label: "南京",
+                    value: "Nanjing",
+                    label: "南京",
                 },
                 {
-                value: "Chengdu",
-                label: "成都",
+                    value: "Chengdu",
+                    label: "成都",
                 },
                 {
-                value: "Shenzhen",
-                label: "深圳",
+                    value: "Shenzhen",
+                    label: "深圳",
                 },
                 {
-                value: "Guangzhou",
-                label: "广州",
+                    value: "Guangzhou",
+                    label: "广州",
                 }
             ],
-            input:'hahhahah',
-            defaultValue:'asdasda',
-            radio:3,
-            radio1:5,
-            btnstyleObj:{
+            input: 'hahhahah',
+            defaultValue: 'asdasda',
+            radio: 3,
+            radio1: 5,
+            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:{
-                width:'200px',
-                height:'40px'
+            styleObject: {
+                width: '200px',
+                height: '40px'
             },
-            styleObject1:{
-                width:'600px',
-                height:'50px'
+            styleObject1: {
+                width: '600px',
+                height: '50px'
             },
-            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 弄'
-                }],
+            plain: false,
+            
             options: [{
-            value: '选项1',
-            label: '黄金糕'
+                value: '选项1',
+                label1:'黄金hhhhhh',
+                label: '黄金糕'
             }, {
-            value: '选项2',
-            label: '双皮奶'
+                value: '选项2',
+                label1:'双皮奶hhhhhhhhh',
+                label: '双皮奶'
             }, {
-            value: '选项3',
-            label: '蚵仔煎'
+                value: '选项3',
+                label1:'蚵仔煎hhhhhhhhh',
+                label: '蚵仔煎'
             }, {
-            value: '选项4',
-            label: '龙须面'
+                value: '选项4',
+                label1:'双皮奶hhhhhhhhh',
+                label: '龙须面'
             }, {
-            value: '选项5',
-            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){
-            console.log(data,'data098908090');
+        dialogVisibleChange(data) {
+            console.log(data, 'data098908090');
         },
         // 弹框相关方法---end
 
@@ -522,20 +541,37 @@ 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){
-            console.log(data,'radio--data');
+        radioChange(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('提交成功!');
+                    alert('提交成功!');
                 } else {
-                return false;
+                    return false;
                 }
             });
         },
@@ -546,47 +582,47 @@ import { rules } from "../assets/vabForm";
         triggerError() {
             this.$refs.formRef.validateField('username', (error) => {
                 if (error) {
-                console.log('错误信息:', error);
+                    console.log('错误信息:', error);
                 } else {
-                console.log('无错误');
+                    console.log('无错误');
                 }
             });
         },
-        getFormdata(){
+        getFormdata() {
             console.log(this.$refs.GuipInput.value);
         },
-        handleInput(value){
-            console.log(value,'value===输入框输入得知');
+        handleInput(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();
             dataList.forEach((item) => {
                 if (item.field === "id") {
-                item.options = this.cities;
+                    item.options = this.cities;
                 }
                 if (item.field === "id1") {
-                item.options = this.optionss;
+                    item.options = this.optionss;
                 }
             });
             this.formList = dataList;
         },
         save() {
-        this.$refs.VabForm.submitForm("ruleForm");
+            this.$refs.VabForm.submitForm("ruleForm");
         },
         //取消
         cancellation() {
             this.$refs.VabForm.resetForm("ruleForm");
         },
         // 表格点击、选择
-        handleSelectionChange(data){
+        handleSelectionChange(data) {
             // 多选模式下的时候 data 为数组格式
             // 单选的时候是 对象
-            console.log(data,'表格行信息');
+            console.log(data, '表格行信息');
         },
         // 全选按钮
         toggleAllSelection() {
@@ -598,44 +634,46 @@ import { rules } from "../assets/vabForm";
         this.getList();
     },
 
-  }
-  </script>
-  <style lang="scss" scoped>
-    .elementWrap{
-        /* width: 100%; */
-        padding: 30px 40px;
-        .ele-item{
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            margin-bottom: 30px;
-            label{
-                font-size: 16px;
-                font-weight: bold;
-                width: 100px;
-                margin-right: 10px;
-                text-align: left;
-            }
+}
+</script>
+<style lang="scss" scoped>
+.elementWrap {
+    /* width: 100%; */
+    padding: 30px 40px;
+
+    .ele-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin: 20px 0 30px;
+
+        label {
+            font-size: 16px;
+            font-weight: bold;
+            width: 100px;
+            margin-right: 10px;
+            text-align: left;
         }
     }
+}
 
 
 .ScaleBox {
-  width: 1000px;
-  background-size: 100% 100%;
-  -ms-transition: 0.3s;
-  transition: 0.3s;
-  -ms-transform-origin: 0 0;
-  transform-origin: 0 0;
-  margin: 0 auto;
+    width: 1000px;
+    background-size: 100% 100%;
+    -ms-transition: 0.3s;
+    transition: 0.3s;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+    margin: 0 auto;
 }
+
 .cardfooter {
-  width: 100%;
-//   position: fixed;
-  bottom: 20px;
-  right: 30px;
-  text-align: right;
-  justify-content: center;
+    width: 100%;
+    //   position: fixed;
+    bottom: 20px;
+    right: 30px;
+    text-align: right;
+    justify-content: center;
 }
-</style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file