表格、弹出框组件封装

src/components/GuipDialog.vue

@@ -0,0 +1,114 @@
+<template>
+    <el-dialog
+        :visible.sync="dialogShow"
+        :title="title"
+        :width="width"
+        :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>
+    </el-dialog>
+  </template>
+  
+  <script>
+  export default {
+    name: 'CustomDialog',
+    props: {
+      // 控制弹框显示
+      dialogVisible: {
+        type: Boolean,
+        default: false,
+      },
+      // 弹框标题
+      title: {
+        type: String,
+        default: '提示',
+      },
+      // 弹框宽度
+      width: {
+        type: String,
+        default: '30%',
+      },
+        // 是否显示右上角关闭按钮
+        showCloseButton: {
+        type: Boolean,
+        default: true,
+        },
+      // 是否显示取消按钮
+      showCancelButton: {
+        type: Boolean,
+        default: true,
+      },
+      // 取消按钮文本
+      cancelText: {
+        type: String,
+        default: '取消',
+      },
+      // 确认按钮文本
+      confirmText: {
+        type: String,
+        default: '确定',
+      },
+    },
+    computed: {
+        dialogShow: {
+            get() {
+                return this.dialogVisible;
+            },
+            set(newVal) {
+                this.$emit('dialogVisibleChange', newVal);
+            }
+        }
+    },
+    data() {
+        return {
+            // 内部维护一个 visible 状态
+            internalVisible: this.visible,
+            // dialogVisible:false,
+        };
+    },
+    watch: {
+        // // 监听 prop 的变化，同步到 internalVisible
+        // visible(newVal) {
+        //     this.internalVisible = newVal;
+        // },
+        // // 监听 internalVisible 的变化，通知父组件
+        // internalVisible(newVal) {
+        //     this.$emit('update:visible', newVal);
+        // },
+  },
+    methods: {
+     // 关闭弹框
+        handleClose(done) {
+            this.$emit('close');
+            this.internalVisible = false; // 关闭弹框
+            if(done){
+                done();
+            }
+        },
+        // 点击取消按钮
+        handleCancel() {
+            this.$emit('cancel');
+            this.internalVisible = false; // 关闭弹框
+        },
+        // 点击确认按钮
+        handleConfirm() {
+            this.$emit('confirm');
+            this.internalVisible = false; // 关闭弹框
+        },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .dialog-footer {
+    text-align: right;
+  }
+  </style>

src/components/GuipForm copy.vue

@@ -0,0 +1,247 @@
+<!-- Dom模板 -->
+<template>
+    <div>
+      <!-- Dom内容 -->
+      <el-form
+        :model="ruleForm"
+        ref="ruleForm"
+        :label-width="labelWidth"
+        class="el-row demo-ruleForm"
+        :label-position="labelPosition"
+      >
+        <el-form-item
+          v-for="(item, index) in formList"
+          :key="index"
+          :label="item.label"
+          :prop="item.field"
+          :rules="detail ? false : item.rules"
+          :class="item.colWidth"
+        >
+          <!-- 输入框 -->
+          <template v-if="item.type === 'input'">
+            <el-input
+              :placeholder="item.placeholder"
+              clearable
+              :disabled="disabled"
+              v-model="ruleForm[`${item.field}`]"
+            />
+          </template>
+          <!-- 下拉框 -->
+          <template v-if="item.type === 'select'">
+            <el-select
+              v-model="ruleForm[`${item.field}`]"
+              :placeholder="item.placeholder"
+              :disabled="disabled"
+              :multiple="item.multiple"
+              style="width: 100%"
+              @change="changeSelect"
+            >
+              <el-option
+                v-for="(element, i) in item.options"
+                :label="element.label"
+                :value="`${element.value}`"
+                :key="i"
+              />
+            </el-select>
+          </template>
+          <!-- 单选框 -->
+          <template v-if="item.type === 'radio'">
+            <el-radio-group
+              v-model="ruleForm[`${item.field}`]"
+              :disabled="disabled"
+            >
+              <el-radio
+                v-for="(element, i) in item.options"
+                :key="i"
+                :label="`${element.value}`"
+              >
+                {{ element.label }}
+              </el-radio>
+            </el-radio-group>
+          </template>
+          <!-- 复选框 -->
+          <template v-if="item.type === 'checkbox'">
+            <el-checkbox-group
+              v-model="ruleForm[`${item.field}`]"
+              :disabled="disabled"
+            >
+              <el-checkbox
+                v-for="(city, i) in item.cities"
+                :label="city"
+                :name="city"
+                :key="i"
+              >
+                {{ city }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </template>
+          <!--文本框  -->
+          <template v-if="item.type === 'textarea'">
+            <el-input
+              :maxlength="item.maxLenght"
+              type="textarea"
+              :rows="item.rowsHeight"
+              :disabled="disabled"
+              :placeholder="item.placeholder"
+              v-model="ruleForm[`${item.field}`]"
+            />
+          </template>
+          <!-- 时间选择 -->
+          <template v-if="item.type === 'date'">
+            <el-date-picker
+              v-model="ruleForm[`${item.field}`]"
+              align="right"
+              style="width: 100%"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :disabled="disabled"
+              type="date"
+              placeholder="选择日期"
+              :picker-options="item.pickerOptions"
+            >
+            </el-date-picker>
+          </template>
+          <!-- 附件 -->
+          <template v-if="item.type === 'upload'">
+            <el-upload
+              :action="item.action"
+              list-type="picture-card"
+              :headers="item.headers"
+              :disabled="disabled"
+              class="upload-demo"
+              :multiple="item.multiple"
+              :data="ruleForm[`${item.field}`]"
+              :file-list="ruleForm[`${item.field}`]"
+              :on-change="uploadFile"
+              :auto-upload="false"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+            >
+              <i slot="default" class="el-icon-plus"></i>
+            </el-upload>
+          </template>
+        </el-form-item>
+      </el-form>
+      <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt="" />
+      </el-dialog>
+    </div>
+  </template>
+  <script>
+  export default {
+    props: {
+      detail: {
+        type: Boolean,
+        default: () => false,
+      },
+      disabled: {
+        type: Boolean,
+        default: () => false,
+      },
+      //回显数据
+      fromItem: {
+        type: Object,
+        default: () => null,
+      },
+      labelWidth: {
+        type: String,
+        default: () => "100px",
+      },
+      // 表单数据
+      formNewList: {
+        type: Array,
+        default: () => [],
+      },
+      labelPosition: {
+        type: String,
+        default: () => "right",
+      },
+    },
+    watch: {
+      formNewList: {
+        immediate: true, // 立即触发监听函数
+        handler() {
+          this.formList = this.formNewList;
+          this.defaultFun();
+        },
+      },
+    },
+    data() {
+      return {
+        ruleForm: {},
+        formList: [],
+        dialogImageUrl: "",
+        dialogVisible: false,
+      };
+    },
+    methods: {
+      //下拉框下拉事件
+      changeSelect(row) {
+        // console.log(row);
+        this.$emit("changeSelect", row);
+      },
+      //上传附件
+      uploadFile(file, fileList) {
+        this.formList.forEach((item) => {
+          if (item.type === "upload") {
+            this.$set(this.ruleForm, item.field, fileList);
+          }
+        });
+      },
+      //删除附件
+      handleRemove(file) {
+        this.formList.forEach((item) => {
+          let fileList = this.ruleForm[`${item.field}`];
+          if (item.type === "upload") {
+            fileList.forEach((element, i) => {
+              if (file.uid === element.uid) {
+                fileList.splice(i, 1);
+              }
+            });
+          }
+          this.$set(this.ruleForm, item.field, fileList);
+        });
+      },
+      //附件预览
+      handlePictureCardPreview(file) {
+        console.log(file);
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      //表单默认状态
+      defaultFun() {
+        if (this.fromItem !== null) {
+          // 数据回显
+          this.ruleForm = { ...this.ruleForm, ...this.fromItem };
+        } else {
+          //设置默认值
+          this.formList.forEach((item) => {
+            if (item.cities) {
+              this.$set(this.ruleForm, item.field, []);
+            } else {
+              this.$set(this.ruleForm, item.field, "");
+            }
+            if (item.type === "radio") {
+              this.$set(this.ruleForm, item.field, "1");
+            }
+            if (item.type === "upload") {
+              this.$set(this.ruleForm, item.field, []);
+            }
+          });
+        }
+        console.log(this.ruleForm);
+      },
+      //from表单点击事件
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$emit("headdenForm", this.ruleForm);
+          }
+        });
+      },
+      //清空表单
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+    },
+  };
+  </script>

src/components/GuipFormItem.vue

@@ -1,6 +1,6 @@
 <template>
     <div 
-    :class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']">
+    :class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item1']">
         <div class="form-item-top">
             <label v-if="label" for="">{{ label }}
                 <img src="../assets/require.svg" v-if="required" alt="">
@@ -48,60 +48,5 @@ export default {
    }
 </script>
 <style lang="scss" scoped>
-.form-item{
+
-    display: flex;
-    align-items: center;
-    label{
-        min-width: 54px;
-        margin-right: 8px;
-    }
-    .form-item-top{
-        display: flex;
-        align-items: center;
-        text-align: left;
-    }
-    .form-item-bottom{
-        flex: 1;
-    }
-    .rightdesc{
-        flex: 1;
-        text-align: right;
-        font-size: 12px;
-        line-height: 13px;
-        letter-spacing: 0.08em;
-        font-variation-settings: "opsz" auto;
-        color: #8A9099;
-    }
-}
-.w510{
-    width: 510px;
-}
-.w388{
-    width: 388px;
-}
-.column{
-    display: flex;
-    flex-direction: column !important;
-    align-items: self-start;
-    .form-item-top{
-        width: 100%;
-        margin-bottom: 12px;
-        justify-content: space-between;
-    }
-    .form-item-bottom{
-        width: 100%;
-    }
-}
-.form-top-icon{
-    display: flex;
-    align-items: center;
-    img{
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-    }
-    span{
-        color: #1E2226;
-    }
-}
 </style>

src/components/GuipInput.vue

@@ -1,11 +1,15 @@
 <template>
-  
+  <el-form-item 
+  :style="Object.assign(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>
     <el-input
       :type="type"
-      :style="{...style,width:width,height:height,...styleObject}"
       :placeholder="placeholder1"
       :disabled="disabled"
       :maxlength="maxlength1"
+      :style="{width:width}"
       :minLength="minLength1"
       :show-word-limit="showWordLimit"
       @input="$emit('input', $event)"
@@ -27,22 +31,29 @@
       <template v-slot:append>
         <slot name="appendshow"></slot>
       </template>
+
+      <!-- :error="errorMessage" show-message -->
+
       <!-- <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>
+  </el-form-item>
+
  </template>
   
  <script>
  export default {
    name: 'GuipInput',
-   props:['styleObject','disabled','defaultValue','placeholder','maxlength','minLength','clear','width','height','showWordLimit','type'],
+   props:['styleObject','disabled','defaultValue','placeholder',
+   'maxlength','minLength','clear','width','height','showWordLimit',
+   'label','type','prop','rules','column','addClass','desc'],
    data() {
        return {
            value: '',
            maxlength1: '',
            minLength1: 0,
            style:{
-              width:'200px',
+              width:'510px',
               height:'38px'
            },
            placeholder1:'请输入内容'
@@ -119,3 +130,5 @@
    }
  }
  </script>
+ <style lang="scss" scoped>
+</style>

src/components/GuipRadio.vue

@@ -1,26 +1,85 @@
-<template>
+   <template>
-     <el-radio  
+    <el-form-item
-     :label="label"
+    :class="[{'column':column},'form-item']"
-     :disabled="disabled"
+    :label="label" :prop="prop" :rules="rules">
-     :v-model="defaultValue"
+      <el-radio-group
-     >
+        v-model="selectedValue"
-     <template #label>
+        @change="handleChange"
-      <span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
+      >
-    </template>
+        <el-radio
-     </el-radio>
+          v-for="option in options"
-   </template>
+          :key="option.value"
+          :label="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+          <!-- <template #label>
+            <span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
+          </template> -->
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </template>
   
-   <script>
+  <script>
-   export default {
+  export default {
-     name: 'GuipRadio',
+    name: 'MyRadioGroup',
-     props:['radio','label','defaultValue','disabled','text'],
+    props: {
-     data() {
+      // 是否是纵向排列
-         return {
+      column:{
-            // radio: '1'
+        type:Boolean,
-         }
+        default:false
-     },
+      },
-     mounted(){
+      // 选项列表，格式为 [{ label: '显示文本', value: '值', disabled: false }]
+      options: {
+        type: Array,
+        required: true,
+      },
+      // 当前选中的值，使用 v-model 绑定
+      value: {
+        type: [String, Number, Boolean],
+        default: '',
+      },
+      // 表单项的 label
+      label: {
+        type: String,
+        default: '',
+      },
+      // 表单项的 prop（用于表单校验）
+      prop: {
+        type: String,
+        default: '',
+      },
+      // 校验规则
+      rules: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        selectedValue: this.value, // 内部维护的选中值
+      };
+    },
+    watch: {
+      // 监听外部传入的 value 变化，更新内部 selectedValue
+      value(newVal) {
+        this.selectedValue = newVal;
+      },
+    },
+    methods: {
+      // 选中值变化时触发
+      handleChange(value) {
+        this.$emit('input', value); // 更新 v-model
+        this.$emit('change', value); // 触发 change 事件
+      },
+    },
+  };
+  </script>
   
-     }
+  <style scoped>
-   }
+  /* 自定义样式 */
-   </script>
+  .el-radio-group {
+    margin: 10px 0;
+  }
+  </style>

src/components/GuipSelect.vue

@@ -1,23 +1,49 @@
 <template>
-  <el-select v-model="value" placeholder="请选择">
+   <el-form-item 
-    <el-option
+    :style="Object.assign(style,{height:height},styleObject)"
-      v-for="item in options"
+    :class="[{'column':column},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']"
-      :key="item.value"
+    :label="label" :prop="prop" :rules="rules">
-      :label="item.label"
+
-      :value="item.value">
+    <p v-if="desc" class="desc_right">{{ desc }}</p>
-    </el-option>
+
-  </el-select>
+    <el-select
+      :style="{width:width}"
+      v-model="value" placeholder="请选择">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :disabled="item.disabled"
+        :value="item.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
  </template>
   
  <script>
- export default {
+  export default {
-   name: 'GuipTextarea',
+    name: 'GuipTextarea',
-   props:['options'],
+    props:['options','styleObject','disabled','defaultValue','placeholder',
-   data() {
+    'width','height','label','type','prop','rules','column','addClass','desc'],
-   return {
+    data() {
-     
+      return {
-        value: ''
+            value: '',
-   }
+            style:{}
- }
+      }
- }
+    },
+    defaultValue(newVal) {
+      console.log(newVal,'newVal');
+      this.value = newVal;
+    },
+    created(){
+      // 默认值赋值
+      if(this.defaultValue != null){
+        this.value = this.defaultValue;
+      }
+      // 默认提示语
+      if(this.placeholder){
+        this.placeholder1 = this.placeholder;
+      }
+   },
+  }
  </script>

src/components/GuipTable.vue

@@ -1,20 +1,52 @@
 <template>
  <el-table
+ ref="guiptable"
     :data="tableData"
     height="250"
-    :border=true
+    :border="border"
-    style="width: 100%">
+    @selection-change="handleSelectionChange"
-   <slot></slot>
+    :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>
+
+    
   </el-table>
  </template>
   
  <script>
  export default {
-   name: 'GuipTextarea',
+    name: 'GuipTextarea',
-   props:['tableData'],
+    props:['tableData','width','autoColumn','columns','border','multiple'],
-   data() {
+    data() {
-   return {
+      return {
-   }
+
- }
+      }
+    },
+    methods:{
+      handleSelectionChange(row){
+        // 获取的当前行信息
+        console.log(row,'======');
+        this.$emit('selectChange',row)
+      }
+    }
  }
  </script>

src/style/theme/common.scss

@@ -150,6 +150,12 @@ body{
     border-color: transparent;
     transition: all .5s;
 }
+.el-select .el-input__inner:focus{
+    border-color: transparent;
+}
+.el-select>.el-input{
+    height: 100%;
+}
 // select end
 
 // textarea start
@@ -165,3 +171,149 @@ body{
     outline: 3px solid #D8E9FA;
 }
 // textarea end
+
+
+.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
+    content: '';
+}
+.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::after, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after{
+    content: url(../../assets/require.svg);
+    display: inline-block;
+    // background-image: url(../../assets/require.svg);
+    color: #ff4d4f;
+    margin-right: 4px;
+    margin-left: 4px;
+}
+
+.form-item1{
+    display: flex;
+    align-items: center;
+    label{
+        min-width: 54px;
+        margin-right: 8px;
+    }
+    .form-item-top{
+        height: 18px;
+        display: flex;
+        align-items: center;
+        text-align: left;
+    }
+    .form-item-bottom{
+        flex: 1;
+    }
+    .rightdesc{
+        flex: 1;
+        text-align: right;
+        font-size: 12px;
+        line-height: 13px;
+        letter-spacing: 0.08em;
+        font-variation-settings: "opsz" auto;
+        color: #8A9099;
+    }
+    .form-item{
+        margin-bottom: 0;
+    }
+}
+.el-form-item__content{
+    // width: 100%;
+    flex: 1;
+    position: relative;
+    .desc_right{
+      position: absolute;
+      right: 0;
+      top: -40px;
+      margin: 0;
+      font-size: 12px;
+      line-height: 40px;
+      letter-spacing: 0.08em;
+      font-variation-settings: "opsz" auto;
+      color: #8A9099;
+    }
+  }
+.w510{
+    width: 510px;
+}
+.w388{
+    width: 388px;
+}
+.form-item{
+    display: flex;
+    align-items: center;
+}
+.column{
+    display: flex;
+    flex-direction: column !important;
+    align-items: self-start;
+    .form-item-top{
+        width: 100%;
+        margin-bottom: 12px;
+        justify-content: space-between;
+    }
+    .form-item-bottom{
+        width: 100%;
+    }
+    .el-form-item__content{
+        width: 100%;
+    }
+}
+.form-top-icon{
+    display: flex;
+    align-items: center;
+    img{
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+    }
+    span{
+        color: #1E2226;
+    }
+}
+
+
+// table start
+.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+    background-color: #F6F7FA;
+}
+.el-table td.el-table__cell{
+    border-bottom: 1px solid#EAECF0;
+}
+.el-table--fit{
+    border: 1px solid#EAECF0;
+}
+.el-button--text{
+    padding: 0;
+    width: auto !important;
+    height: auto !important;
+}
+.el-table th.el-table__cell{
+    background: #F6F7FA;
+    padding: 18px 0;
+}
+.el-table th.el-table__cell>.cell{
+    padding-left: 16px;
+    padding-right: 16px;
+}
+.el-table .el-table__cell{
+    padding: 18px 0;
+}
+.el-table .cell{
+    padding-left: 16px;
+    padding-right: 16px;
+}
+.el-table .el-form-item{
+    margin-bottom: 0;
+}
+
+// table end
+
+// dialog--start
+.el-dialog__footer{
+    display: flex;
+    justify-content: center;
+}
+// dialog--end
+
+.flex{
+    display: flex;
+    align-items: center;
+}

src/views/elementGroups.vue

@@ -1,38 +1,84 @@
 <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 msg="Welcome to Your Vue.js App" :options="options"/>
+            <GuipSelect width="600px"
+            v-model="form.card" label="卡片" prop="card"
+            :options="options" defaultValue="选项1"/>
         </div>
         <div class="ele-item">
             <label for="">表格：</label>
-            <GuipTable msg="Welcome to Your Vue.js App" :tableData="tableData">
+            <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
-                <el-table-column
+
-                    prop="date"
+            <GuipTable :tableData="tableData" 
-                    label="日期"
+            ref="multipleTable"
-                    width="180">
+            @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">
+                            <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
+                    <el-table-column prop="address" label="地址"> </el-table-column>
-                    prop="name"
+                    <el-table-column prop="address1" label="地址测试"></el-table-column>
-                    label="姓名"
+                    <el-table-column prop="price" label="价格">
-                    width="180">
+                        <!-- 自定义渲染内容 -->
+                        <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
-                    prop="address"
+                    fixed="right"
-                    label="地址">
+                    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>
-                    <el-table-column
+                </template>
-                    prop="address1"
-                    label="地址测试">
-                </el-table-column>
             </GuipTable>
         </div>
         <div class="ele-item">
             <label for="">文本域：</label>
             <GuipTextarea disabled :styleObject="styleObject"/>
         </div>
+
+
         <div class="ele-item">
             <label for="">输入框：</label>
             <GuipInput
@@ -127,8 +173,8 @@
             <GuipButton type="primary" :btnstyle="btnstyleObj1">随便写的</GuipButton>
         </div>
         <div class="ele-item">
-            <label for="">表单校验:</label>
+            <!-- <label for="">表单校验:</label> -->
-            <el-form :model="form" :rules="rules" ref="myForm">
+            <!-- <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>
@@ -136,61 +182,33 @@
                     <el-button type="primary" @click="submitForm">提交</el-button>
                     <el-button @click="triggerError">触发错误</el-button>
                 </div>
-            </el-form>
+            </el-form> -->
         </div>
 
-        <div style="width: 300px;height: 100px;">
+        <div style="width: 600px;">
-            <h3>表单左右布局</h3>
+            <h3>表单左右布局（直接使用封装好的input）</h3>
         <!-- 表单左右布局 -->
-            <GuipFormItem
+            <GuipInput
-            label="标题"
-            :required="true"
-            >
-                <GuipInput
-                slot="formDom"
-                ref="GuipInput"
-                width="280px"
-                height="32px"
-                placeholder="这是自定义默认提示语"/>
-            </GuipFormItem>
-        </div>
-
-        <div style="width: 300px;height: 150px;">
-            <h3>表单上下布局</h3>
-            <GuipFormItem
-            label="标题"
-            :required="true"
-            column="column"
-            >
-                <GuipInput
-                slot="formDom"
                 ref="GuipInput"
-                width="100%"
+                addClass="w510"
-                height="38px"
+                v-model="form.username" label="Username" prop="username" :rules="usernameRules"
-                placeholder="这是自定义默认提示语"/>
+                placeholder="这是自定义默认提11示语"/>
-            </GuipFormItem>
         </div>
 
-        <div style="width: 300px;height: 150px;">
+        <div style="width: 800px;height: 150px;">
-            <h3>表单上下布局(带右侧文案)</h3>
+            <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
-            <GuipFormItem
-            label="标题"
-            :required="true"
-            column="column"
-            addClass="w510"
-            >
-            <span class="rightdesc" slot="formRight">这是右侧文案</span>
                 <GuipInput
-                slot="formDom"
                 ref="GuipInput"
-                width="100%"
+                column="column"
-                height="38px"
+                addClass="w510"
+                label="age"
+                desc="这是是右侧文案"
+                v-model="form.age" prop="age" 
                 placeholder="这是自定义默认提示语"/>
-            </GuipFormItem>
         </div>
 
-        <div style="width: 300px;height: 150px;">
+        <div style="width: 600px;height: 150px;">
-            <h3>获取手机验证码</h3>
+            <h3>获取手机验证码(布局也可更改，使用插槽自定义展示内容)</h3>
             <GuipFormItem
             column="column"
             addClass="w388"
@@ -203,7 +221,10 @@
                 <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>
@@ -215,18 +236,37 @@
             <!-- Form  组件-->
             <!-- @headdenForm="headdenForm" -->
             <!-- @changeSelect="changeSelect" -->
-            <GuipForm
+            <!-- <GuipForm
                 :fromItem="fromItem"
                 :formNewList="formList"
                 :detail="edit"
                 :disabled="edit"
                 ref="VabForm"
             />
-            <div class="cardfooter">
+            <div class="cardfooter" style="display: flex;">
                 <el-button @click="cancellation">取消</el-button>
                 <el-button @click="save" type="primary">保存</el-button>
-            </div>
+            </div> -->
         </div>
+
+        <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>
     </div>
   </template>
   
@@ -235,7 +275,9 @@
 import { rules } from "../assets/vabForm";
   // @ is an alias to /src
   import GuipFormItem from '@/components/GuipFormItem.vue';
-  import GuipForm from '@/components/GuipForm.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 GuipConfirm from '@/components/GuipConfirm.vue';
@@ -250,8 +292,9 @@ import { rules } from "../assets/vabForm";
     components: {
         GuipTextarea,
         GuipTable,
-        GuipForm,
+        // GuipForm,
-        // GuipRadio,
+        GuipDialog,
+        GuipRadio,
         GuipFormItem,
         PhoneCode,
         GuipButton,
@@ -262,14 +305,38 @@ import { rules } from "../assets/vabForm";
     },
     data(){
         return {
+            dialogVisible: false,//是否展示弹框
+            showCancelButton: true, // 控制是否显示取消按钮
+            showCloseButton: true, // 控制是否显示关闭按钮
+            // inputValue: '',
             form: {
-                username: ''
+                username: '',
+                language:'',
             },
+            languageOptions: [
+                { label: 'JavaScript', value: 'js' },
+                { label: 'Python', value: 'py' },
+                { label: 'Java', value: 'java', disabled: true }, // 禁用选项
+                { label: 'Go', value: 'go' },
+            ],
             rules: {
                 username: [
                     { required: true, message: '请输入用户名', trigger: 'blur' }
+                ],
+                card: [
+                    { required: true, message: '请选择有效信息', trigger: 'blur' }
+                ],
+                language: [
+                    { required: true, message: '请选择语言', trigger: 'blur' },
+                ],
+                phone: [
+                    { required: true, message: '请输入手机号', trigger: 'blur' }
+                ],
+                age: [
+                    { required: true, message: '请输入年龄', trigger: 'blur' }
                 ]
             },
+            usernameRules:[{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
             msg: "测试",
             title: "相关附件",
             edit: false,
@@ -370,22 +437,25 @@ import { rules } from "../assets/vabForm";
                 height:'40px'
             },
             styleObject1:{
-                width:'300px',
+                width:'600px',
                 height:'50px'
             },
             plain:false,
             tableData: [{
                 date: '2016-05-03',
                 name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
+                address: '上海市普陀区金沙江路 1518 弄',
+                price:'20',
                 }, {
                 date: '2016-05-02',
                 name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
+                address: '上海市普陀区金沙江路 1518 弄',
+                price:'10',
                 }, {
                 date: '2016-05-04',
                 name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
+                address: '上海市普陀区金沙江路 1518 弄',
+                price:'200',
                 }, {
                 date: '2016-05-01',
                 name: '王小虎',
@@ -422,8 +492,46 @@ import { rules } from "../assets/vabForm";
         }
     },
     methods:{
+        // 弹框相关方法---start
+        openDialog() {
+            this.dialogVisible = true;
+        },
+        // 确认按钮事件
+        handleConfirm() {
+            this.$message.success('点击了确认按钮');
+            this.dialogVisible = false;
+        },
+        // 取消按钮事件
+        handleCancel() {
+            this.$message.warning('点击了取消按钮');
+            this.dialogVisible = false;
+        },
+        // 关闭弹框事件
+        handleClose() {
+            this.$message.info('弹框已关闭');
+            this.dialogVisible = false;
+        },
+        dialogVisibleChange(data){
+            console.log(data,'data098908090');
+        },
+        // 弹框相关方法---end
+
+        // 选择表格某一项 点击  
+        handlePriceClick(row) {
+            this.currentRow = row;
+            this.editedPrice = row.price;
+            this.dialogVisible = true;
+        },
+        // 监听单选框组变化
+        radioChange(data){
+            console.log(data,'radio--data');
+        },
+        handleClick(row) {
+            console.log(row);
+        },
         submitForm() {
-            this.$refs.myForm.validate((valid) => {
+            this.$refs.formRef.validate((valid) => {
+                console.log(this.form,'======formxinxi');
                 if (valid) {
                 alert('提交成功!');
                 } else {
@@ -431,8 +539,12 @@ import { rules } from "../assets/vabForm";
                 }
             });
         },
+        // 重置表单
+        resetForm() {
+            this.$refs.form.resetFields();
+        },
         triggerError() {
-            this.$refs.myForm.validateField('username', (error) => {
+            this.$refs.formRef.validateField('username', (error) => {
                 if (error) {
                 console.log('错误信息:', error);
                 } else {
@@ -440,10 +552,6 @@ import { rules } from "../assets/vabForm";
                 }
             });
         },
-        // 监听单选框组变化
-        radioChange() {
-            // console.log(this.radio,'=====');
-        },
         getFormdata(){
             console.log(this.$refs.GuipInput.value);
         },
@@ -467,6 +575,24 @@ import { rules } from "../assets/vabForm";
             });
             this.formList = dataList;
         },
+        save() {
+        this.$refs.VabForm.submitForm("ruleForm");
+        },
+        //取消
+        cancellation() {
+            this.$refs.VabForm.resetForm("ruleForm");
+        },
+        // 表格点击、选择
+        handleSelectionChange(data){
+            // 多选模式下的时候 data 为数组格式
+            // 单选的时候是 对象
+            console.log(data,'表格行信息');
+        },
+        // 全选按钮
+        toggleAllSelection() {
+            // console.log(this.$refs.multipleTable,'this.$refs.multipleTable');
+            this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
+        },
     },
     mounted() {
         this.getList();
@@ -492,5 +618,24 @@ import { rules } from "../assets/vabForm";
             }
         }
     }
+
+
+.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;
+}
+.cardfooter {
+  width: 100%;
+//   position: fixed;
+  bottom: 20px;
+  right: 30px;
+  text-align: right;
+  justify-content: center;
+}
 </style>