Explorar el Código

优化表单样式

ZaiZai hace 2 años
padre
commit
892da1cd71
Se han modificado 1 ficheros con 9 adiciones y 5 borrados
  1. 9 5
      src/components/table-form/index.vue

+ 9 - 5
src/components/table-form/index.vue

@@ -1,11 +1,11 @@
 <template>
-    <div :id="`table-form-item-${keyId}`" v-loading="isLoading" :style="tableFormStyle"
-         class="hc-table-form-data-item">
+    <div :id="`table-form-item-${keyId}`" v-loading="isLoading" :class="!isTableForm? 'no-scroll-bar' : ''"
+         :style="tableFormStyle" class="hc-table-form-data-item">
         <el-scrollbar v-if="isScroll" class="table-form-item-scrollbar">
             <div :id="`table-form-${keyId}`" class="hc-excel-table-form"/>
         </el-scrollbar>
         <div v-else :id="`table-form-${keyId}`" class="hc-excel-table-form"/>
-        <div v-if="isTableForm === false" class="hc-no-table-form">
+        <div v-if="!isTableForm" class="hc-no-table-form">
             <div class="table-form-no">
                 <img :src="notableform" alt=""/>
                 <div class="desc">{{ noTips }}</div>
@@ -150,8 +150,8 @@ const getExcelHtml = () => {
     const pkeyId = keyId.value
     const temp = isString(excelHtml.value) ? excelHtml.value : ''
     if (temp && pkeyId) {
-        isTableForm.value = true
         //渲染表单
+        isTableForm.value = true
         tableFormApp.value = HTableForm.createForm({
             template: temp,
             tableForm: excelForm.value,
@@ -172,11 +172,12 @@ const getExcelHtml = () => {
         nextTick(() => {
             HTableForm.setByClassKeyup(colsKeys.value)
         })
+        emit('render', excelForm.value)
     } else {
         isTableForm.value = false
         excelForm.value.isRenderForm = false
+        emit('render', excelForm.value)
     }
-    emit('render', excelForm.value)
 }
 
 //正则效验
@@ -401,6 +402,9 @@ defineExpose({
     height: 100%;
     overflow: hidden;
     background-color: white;
+    &.no-scroll-bar .el-scrollbar {
+        display: none;
+    }
     .hc-excel-table-form {
         position: relative;
         display: flex;