form小标题样式

src/components/byForm/index.vue

@@ -7,8 +7,7 @@
       :rules="rules"
       :labelPosition="formOption.labelPosition || 'top'"
       ref="byForm"
-      :disabled="formOption.disabled || false"
-    >
+      :disabled="formOption.disabled || false">
       <el-form-item
         :label="i.label"
         v-for="i in formConfig"
@@ -16,16 +15,9 @@
         :prop="i.prop"
         v-show="i.isShow || i.isShow == undefined"
         :style="
-          i.type == 'title'
-            ? 'width:100%'
-            : i.itemWidth
-            ? 'width:' + i.itemWidth + '%'
-            : formOption.itemWidth
-            ? 'width:' + formOption.itemWidth + '%'
-            : '100%'
+          i.type == 'title' ? 'width:100%;' : i.itemWidth ? 'width:' + i.itemWidth + '%' : formOption.itemWidth ? 'width:' + formOption.itemWidth + '%' : '100%'
         "
-        :class="i.isHide ? 'dn' : ''"
-      >
+        :class="i.isHide ? 'dn' : '' + i.type == 'title' ? ' title-bold' : ''">
         <el-input
           v-if="i.type == 'input'"
           v-model="formData[i.prop]"
@@ -38,8 +30,7 @@
           :min="i.min"
           :maxlength="i.maxlength"
           :readonly="i.readonly ? i.readonly : false"
-          :style="i.style"
-        />
+          :style="i.style" />
         <el-input
           v-if="i.type == 'selectInput'"
           v-model="formData[i.prop]"
@@ -50,8 +41,7 @@
           :max="i.max"
           :min="i.min"
           :maxlength="i.maxlength"
-          :readonly="i.readonly ? i.readonly : false"
-        >
+          :readonly="i.readonly ? i.readonly : false">
           <template #prepend>
             <el-select
               v-model="formData[i.selectProp]"
@@ -59,15 +49,8 @@
               @change="(e) => commonsEmit(e, i)"
               :disabled="i.disabled ? i.disabled : false"
               :readonly="i.readonly ? i.readonly : false"
-              style="width: 80px"
-            >
-              <el-option
-                :label="j.title || j.name || j.label"
-                :value="j.id || j.value"
-                v-for="j in i.data"
-                :key="j.id"
-              >
-              </el-option>
+              style="width: 80px">
+              <el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id"> </el-option>
             </el-select>
           </template>
         </el-input>
@@ -80,15 +63,8 @@
           :disabled="i.disabled ? i.disabled : false"
           :filterable="i.filterable ? true : false"
           :style="i.style"
-          :readonly="i.readonly ? i.readonly : false"
-        >
-          <el-option
-            :label="j.title || j.name || j.label"
-            :value="j.id || j.value"
-            v-for="j in i.data"
-            :key="j.id"
-          >
-          </el-option>
+          :readonly="i.readonly ? i.readonly : false">
+          <el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id"> </el-option>
         </el-select>
         <el-tree-select
           v-model="formData[i.prop]"
@@ -104,8 +80,7 @@
           :placeholder="i.placeholder || '请选择'"
           :disabled="i.disabled ? i.disabled : false"
           check-strictly
-          :style="i.style"
-        />
+          :style="i.style" />
         <el-date-picker
           v-model="formData[i.prop]"
           :readonly="i.readonly ? i.readonly : false"
@@ -115,26 +90,18 @@
           @change="(e) => commonsEmit(e, i)"
           :disabled="i.disabled ? i.disabled : false"
           :format="i.format ? i.format : dateFormatInit(i.itemType)"
-          :value-format="i.format ? i.format : dateFormatInit(i.itemType)"
-        />
+          :value-format="i.format ? i.format : dateFormatInit(i.itemType)" />
         <el-switch
           :disabled="i.disabled ? i.disabled : false"
           v-else-if="i.type == 'switch'"
           :readonly="i.readonly ? i.readonly : false"
-          v-model="formData[i.prop]"
-        />
+          v-model="formData[i.prop]" />
         <el-checkbox-group
           v-else-if="i.type == 'checkbox'"
           v-model="formData[i.prop]"
           :readonly="i.readonly ? i.readonly : false"
-          :disabled="i.disabled ? i.disabled : false"
-        >
-          <el-checkbox
-            v-for="j in i.data"
-            :key="j.id || j.value"
-            :label="j.id || j.value"
-            name="type"
-          >
+          :disabled="i.disabled ? i.disabled : false">
+          <el-checkbox v-for="j in i.data" :key="j.id || j.value" :label="j.id || j.value" name="type">
             {{ j.name || j.label }}
           </el-checkbox>
         </el-checkbox-group>
@@ -142,15 +109,8 @@
           v-else-if="i.type == 'radio'"
           v-model="formData[i.prop]"
           :readonly="i.readonly ? i.readonly : false"
-          :disabled="i.disabled ? i.disabled : false"
-        >
-          <el-radio
-            :border="i.border ? i.border : false"
-            v-for="j in i.data"
-            :key="j.id || j.value"
-            :label="j.id || j.value"
-            name="type"
-          >
+          :disabled="i.disabled ? i.disabled : false">
+          <el-radio :border="i.border ? i.border : false" v-for="j in i.data" :key="j.id || j.value" :label="j.id || j.value" name="type">
             {{ j.name || j.label }}
           </el-radio>
         </el-radio-group>
@@ -166,16 +126,14 @@
           :step="i.step ? i.step : 1"
           :precision="i.precision !== '' ? i.precision : 2"
           :controls="i.controls === false ? false : true"
-          :style="i.style"
-        >
+          :style="i.style">
         </el-input-number>
         <el-tree
           v-else-if="i.type == 'tree'"
           :data="i.data"
           :props="i.props"
           :readonly="i.readonly ? i.readonly : false"
-          :show-checkbox="i.showCheckbox || true"
-        >
+          :show-checkbox="i.showCheckbox || true">
         </el-tree>
         <el-cascader
           v-else-if="i.type == 'cascader'"
@@ -185,15 +143,9 @@
           :placeholder="i.placeholder || '请选择'"
           @change="(e) => commonsEmit(e, i)"
           :disabled="i.disabled ? i.disabled : false"
-          :style="i.style"
-        >
+          :style="i.style">
         </el-cascader>
-        <div class="form-title" v-else-if="i.type == 'title'">
-          {{ i.title }}
-        </div>
-        <slot :name="i.slotName" v-else-if="i.type == 'slot'">
-          {{ i.slotName }}插槽占位符
-        </slot>
+        <slot :name="i.slotName" v-else-if="i.type == 'slot'"> {{ i.slotName }}插槽占位符 </slot>
         <div class="upload" v-else-if="i.type == 'upload'">
           <el-upload
             v-model="formData[i.prop]"
@@ -202,39 +154,22 @@
             list-type="picture-card"
             :on-remove="handleRemove"
             :on-success="handleSuccess"
-            :before-upload="handleBeforeUpload"
-          >
+            :before-upload="handleBeforeUpload">
             <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
             <el-icon><Plus /></el-icon>
           </el-upload>
         </div>
-        <div
-          v-else-if="i.type == 'table'"
-          class="by-form-table"
-          style="width: 100%"
-        >
+        <div v-else-if="i.type == 'table'" class="by-form-table" style="width: 100%">
           <el-table :data="formData[i.prop]" style="width: 100%">
-            <el-table-column
-              :prop="j.prop"
-              :label="j.label"
-              :width="i.width"
-              v-for="(j, jindex) in i.column"
-            >
+            <el-table-column :prop="j.prop" :label="j.label" :width="i.width" v-for="(j, jindex) in i.column">
               <template #default="scope" v-if="j.type">
                 <component
                   @change="(e) => formTableChange(e, scope, j)"
                   v-model="scope.row[j.prop]"
                   :is="formTableObj[j.type]"
                   :placeholder="j.placeholder || '请输入'"
-                  :type="j.type == 'number' ? 'number' : 'text'"
-                >
-                  <el-option
-                    :label="n.title || n.name || n.label"
-                    :value="n.id || n.value"
-                    v-for="n in j.data"
-                    :key="n.id"
-                    v-if="j.type == 'select'"
-                  >
+                  :type="j.type == 'number' ? 'number' : 'text'">
+                  <el-option :label="n.title || n.name || n.label" :value="n.id || n.value" v-for="n in j.data" :key="n.id" v-if="j.type == 'select'">
                   </el-option>
                 </component>
               </template>
@@ -242,14 +177,7 @@
           </el-table>
         </div>
         <div v-else-if="i.type == 'json'" class="by-form-json">
-          <byForm
-            :formConfig="i.json"
-            :formOption="formOption"
-            v-model="formData[i.prop]"
-            ref="byform"
-            :rules="rules"
-          >
-          </byForm>
+          <byForm :formConfig="i.json" :formOption="formOption" v-model="formData[i.prop]" ref="byform" :rules="rules"> </byForm>
         </div>
       </el-form-item>
     </el-form>
@@ -260,7 +188,7 @@ export default {
   name: "byForm",
 };
 </script>
-<script  setup>
+<script setup>
 import { set } from "@vueuse/shared";
 import { reactive } from "vue";
 defineProps({
@@ -307,9 +235,7 @@ const handleSuccess = (res, file, files) => {
 };
 
 const handleRemove = (file) => {
-  const index = fileListCopy.value.findIndex(
-    (x) => x.uid === file.uid || x.id === file.id
-  );
+  const index = fileListCopy.value.findIndex((x) => x.uid === file.uid || x.id === file.id);
   fileListCopy.value.splice(index, 1);
 };
 
@@ -389,16 +315,9 @@ const commonRecursive = (arr, labelKey, labelVal, childrenName) => {
       arr[i].children = arr[i][childrenName];
     }
     arr[i].checked = false;
-    typeof arr[i][labelVal] == String
-      ? (arr[i].key = arr[i][labelVal])
-      : (arr[i].key = JSON.stringify(arr[i][labelVal]));
+    typeof arr[i][labelVal] == String ? (arr[i].key = arr[i][labelVal]) : (arr[i].key = JSON.stringify(arr[i][labelVal]));
     if (childrenName) {
-      this.commonRecursive(
-        arr[i][childrenName],
-        labelKey,
-        labelVal,
-        childrenName
-      );
+      this.commonRecursive(arr[i][childrenName], labelKey, labelVal, childrenName);
     }
   }
 };
@@ -413,12 +332,7 @@ const commonGetdata = (isLoad, i) => {
     }
     proxy.formConfig[i].data = getFormat(isLoad.resUrl, message);
     if (isLoad.labelKey) {
-      commonRecursive(
-        proxy.formConfig[i].data,
-        isLoad.labelKey,
-        isLoad.labelVal,
-        isLoad.childrenName
-      );
+      commonRecursive(proxy.formConfig[i].data, isLoad.labelKey, isLoad.labelVal, isLoad.childrenName);
     }
     console.log(proxy.formConfig[i].data);
   });
@@ -427,9 +341,7 @@ const commonGetdata = (isLoad, i) => {
 //根据resurl获取数据
 const getFormat = (formatStr, props) => {
   if (!formatStr) return props;
-  return formatStr
-    .split(".")
-    .reduce((total, cur) => (!total ? "" : total[cur]), props);
+  return formatStr.split(".").reduce((total, cur) => (!total ? "" : total[cur]), props);
 };
 
 //初始化所有表单
@@ -506,12 +418,6 @@ loadInit();
 </script>
 
 <style>
-.form-title {
-  font-size: 14px;
-  font-weight: bold;
-  margin-top: 22px;
-  color: #333333;
-}
 .by-form .el-form--inline .el-form-item {
   margin-right: 0px;
   padding-right: 32px;
@@ -524,4 +430,15 @@ loadInit();
 .by-form-json .by-form .el-form .el-form-item {
   margin-bottom: 18px;
 }
-</style>
+</style>
+
+<style lang="scss" scoped>
+::v-deep(.title-bold) {
+  margin-bottom: 0px !important;
+  margin-top: 16px !important;
+  .el-form-item__label {
+    font-weight: 700 !important;
+    color: black !important;
+  }
+}
+</style>