提交表格基本样式

src/components/FormComponents/CustomForm/FormContent.vue

 <template>
-  <el-row
-    :gutter="options.gutter"
-    class="form-content"
-    :style="{
-      paddingLeft,
-    }"
-  >
+  <el-row :gutter="options.gutter" class="form-content">
     <template
       v-for="(item, columnIndex) in columns.column || columns.children.column"
     >
       <div
         v-if="item.type === 'dynamic'"
+        v-show="item.display"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display"
         class="dynamic-form-container"
       >
         <el-form-item
@@ -24,18 +18,18 @@
         </el-form-item>
         <div class="dynamic-form-container_lable">{{ item.label }}</div>
         <form-dynamic
+          v-model="form[item.prop]"
           :options="item.children"
           :dynamic-data="item.dynamicData"
           :is-show-important="isShowImportant"
-          v-model="form[item.prop]"
         ></form-dynamic>
       </div>
 
       <div
         v-else-if="item.type === 'group'"
+        v-show="item.display"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display"
       >
         <el-collapse :value="item.collapse ? item.prop : ''">
           <el-collapse-item
@@ -56,9 +50,9 @@
 
       <div
         v-else-if="item.type === 'dental-tab'"
+        v-show="item.display && isShowIm(item.importantField)"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display && isShowIm(item.importantField)"
       >
         <el-form-item
           :prop="item.prop"
@@ -68,8 +62,8 @@
         </el-form-item>
         <dental-tab-form
           ref="dental"
-          :item="item"
           v-model="form[item.prop]"
+          :item="item"
           :disabled="options.disabled"
           @change="handleChange"
         ></dental-tab-form>
@@ -77,9 +71,9 @@
 
       <div
         v-else-if="item.type === 'dental-tab-tj'"
+        v-show="item.display && isShowIm(item.importantField)"
         :key="columnIndex"
         style="width: 100%"
-        v-show="item.display && isShowIm(item.importantField)"
       >
         <el-form-item
           :prop="item.prop"
@@ -89,20 +83,21 @@
         </el-form-item>
         <dental-tab-tj-form
           ref="dental"
-          :item="item"
           v-model="form[item.prop]"
+          :item="item"
           :disabled="options.disabled"
         ></dental-tab-tj-form>
       </div>
 
       <el-col
         v-else-if="item.type === 'title'"
+        v-show="item.display"
+        :key="columnIndex"
+        class="row12"
         :xs="item.xs || 24"
         :sm="item.sm || 24"
         :md="item.md || 24"
         :lg="item.span || 12"
-        :key="columnIndex"
-        v-show="item.display"
       >
         <div class="form_title" :style="item.styles">
           <span>{{ item.value }}</span>
@@ -111,16 +106,18 @@
 
       <el-col
         v-else
+        v-show="item.display && isShowIm(item.importantField)"
+        :key="columnIndex"
+        class="row24"
         :xs="item.xs || 24"
         :sm="item.sm || 24"
         :md="item.md || 24"
         :lg="item.lg || item.span || 12"
         :xl="item.span || 12"
-        :key="columnIndex"
-        v-show="item.display && isShowIm(item.importantField)"
       >
         <form-item-self
           :form="form"
+          :column-index="columnIndex"
           :item="item"
           :columns="columns.column || columns.children.column"
           :group="options.group"
@@ -173,11 +170,6 @@ export default {
   data() {
     return {}
   },
-  methods: {
-    handleChange(key, val) {
-      if (this.form.hasOwnProperty(key)) this.form[key] = val
-    },
-  },
 
   computed: {
     isShowIm() {
@@ -190,10 +182,22 @@ export default {
       return columns.labelWidth ? `${columns.labelWidth}px` : ""
     },
   },
+  methods: {
+    handleChange(key, val) {
+      if (this.form.hasOwnProperty(key)) this.form[key] = val
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
+::v-deep {
+  .row24.el-col-lg-12 {
+    &:nth-child(2n) {
+      border-left: 1px solid #ccc;
+    }
+  }
+}
 .form-content ::v-deep {
   display: flex;
   flex-wrap: wrap;

src/components/FormComponents/CustomForm/index.vue

@@ -109,7 +109,8 @@ export default {
   name: "CustomForm",
   components: { FormContent },
   props: {
-    options: {  //配置 数据
+    options: {
+      //配置 数据
       type: Object,
       default: () => {
         return {}
@@ -318,19 +319,36 @@ export default {
 <style lang="scss" scoped>
 .avue-form-self {
   padding: 0 11px;
-
   ::v-deep .el-collapse {
     border: none;
-
-    .el-collapse-item__header.is-active {
-      border-bottom-color: #ebeef5;
+    .el-collapse-item {
+      &:nth-child(1) {
+        border-top: 1px solid #e5e5e5;
+      }
+    }
+    .el-collapse-item__content {
+      padding-bottom: 0px;
+    }
+    .el-collapse-item__header {
+      background: #fafafa;
+      text-indent: 20px;
+      border: 1px solid #e5e5e5;
+      border-bottom-color: #ccc;
+      border-top: 0px;
+      font-size: 14px;
+      font-family: AlibabaPuHuiTiM;
+      color: #333333;
     }
     .el-collapse-item__wrap {
       border: none;
       padding: 10px;
+      border-left: 1px solid #e5e5e5;
+      border-right: 1px solid #e5e5e5;
+      // border-bottom: 1px solid #e5e5e5 !important;
+      padding: 0px;
       &:hover {
-        background-color: #ecf8ff;
-        outline: 1px dashed #ccc;
+        // background-color: #ecf8ff;
+        // outline: 1px dashed #ccc;
       }
     }
     .el-collapse-item__header {

src/views/screening/ScreeningAdd.vue

@@ -9,11 +9,18 @@ export default {
   components: {
     ConfigForms,
   },
+  provide() {
+    const showIndex = true
+
+    return {
+      showIndex,
+    }
+  },
   data() {
     return {}
   },
-  methods: {},
   created() {},
+  methods: {},
 }
 </script>
 

src/views/screening/components/FormTab.vue

@@ -306,6 +306,7 @@ export default {
 .el-main {
   position: relative;
   padding: 0;
+
   .arrow {
     position: absolute;
     right: 0;