@longhongguo/form-create-ant-design-vue 3.3.16 → 3.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.16",
+  "version": "3.3.18",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/components/tableForm/TableForm.vue

@@ -73,6 +73,10 @@ export default {
     headerBackgroundColor: {
       type: String,
       default: ''
+    },
+    emptyText: {
+      type: String,
+      default: ''
     }
   },
   watch: {
@@ -95,6 +99,9 @@ export default {
     },
     headerBackgroundColor() {
       this.loadRule()
+    },
+    emptyText() {
+      this.updateEmptyRule()
     }
   },
   data() {
@@ -121,7 +128,11 @@ export default {
             props: {
               colspan: this.getEmptyColspan()
             },
-            children: [this.formCreateInject.t('dataEmpty') || '暂无数据']
+            children: [
+              this.emptyText ||
+                this.formCreateInject.t('dataEmpty') ||
+                '暂无数据'
+            ]
           }
         ]
       }
@@ -129,9 +140,11 @@ export default {
   },
   methods: {
     getEmptyColspan() {
-      return this.columns.length + 
-        (this.showIndexColumn ? 1 : 0) + 
+      return (
+        this.columns.length +
+        (this.showIndexColumn ? 1 : 0) +
         (this.showOperationColumn ? (this.formCreateInject.preview ? 0 : 1) : 0)
+      )
     },
     formChange() {
       this.updateValue()
@@ -188,10 +201,32 @@ export default {
       })
       this.rule[0].children[1].children = this.trs
     },
+    updateEmptyRule() {
+      const emptyTextValue =
+        this.emptyText || this.formCreateInject.t('dataEmpty') || '暂无数据'
+      if (
+        this.emptyRule &&
+        this.emptyRule.children &&
+        this.emptyRule.children[0]
+      ) {
+        this.emptyRule.children[0].children = [emptyTextValue]
+      }
+      // 更新已经显示的空数据行
+      this.trs.forEach((tr) => {
+        if (tr._isEmpty && tr.children && tr.children[0]) {
+          tr.children[0].children = [emptyTextValue]
+        }
+      })
+      // 更新规则中的空数据行
+      if (this.rule[0] && this.rule[0].children && this.rule[0].children[1]) {
+        this.rule[0].children[1].children = this.trs
+      }
+    },
     addEmpty() {
       if (this.trs.length) {
         this.trs.splice(0, this.trs.length)
       }
+      this.updateEmptyRule()
       this.trs.push(this.emptyRule)
     },
     clearEmpty() {
@@ -250,16 +285,18 @@ export default {
     loadRule() {
       const header = []
       let body = []
-      
+
       // 序号列
       if (this.showIndexColumn) {
         header.push({
           type: 'th',
           native: true,
           class: '_fc-tf-head-idx',
-          style: this.headerBackgroundColor ? {
-            backgroundColor: this.headerBackgroundColor
-          } : {},
+          style: this.headerBackgroundColor
+            ? {
+                backgroundColor: this.headerBackgroundColor
+              }
+            : {},
           props: {
             innerText: '#'
           }
@@ -273,7 +310,7 @@ export default {
           }
         })
       }
-      
+
       // 数据列
       this.columns.forEach((column) => {
         header.push({
@@ -282,9 +319,11 @@ export default {
           style: {
             ...(column.style || {}),
             textAlign: column.align || 'center',
-            ...(this.headerBackgroundColor ? {
-              backgroundColor: this.headerBackgroundColor
-            } : {})
+            ...(this.headerBackgroundColor
+              ? {
+                  backgroundColor: this.headerBackgroundColor
+                }
+              : {})
           },
           class: column.required ? '_fc-tf-head-required' : '',
           props: {
@@ -297,16 +336,18 @@ export default {
           children: [...(column.rule || [])]
         })
       })
-      
+
       // 操作列
       if (this.showOperationColumn) {
         header.push({
           type: 'th',
           native: true,
           class: '_fc-tf-edit fc-clock',
-          style: this.headerBackgroundColor ? {
-            backgroundColor: this.headerBackgroundColor
-          } : {},
+          style: this.headerBackgroundColor
+            ? {
+                backgroundColor: this.headerBackgroundColor
+              }
+            : {},
           props: {
             innerText: this.formCreateInject.t('operation') || '操作'
           }

package/src/parsers/index.js

@@ -20,6 +20,7 @@ import div from './div'
 import alert from './alert'
 import card from './card'
 import accTable from './accTable'
+import tableForm from './tableForm'
 
 export default [
   checkbox,
@@ -43,5 +44,6 @@ export default [
   div,
   alert,
   card,
-  accTable
+  accTable,
+  tableForm
 ]

package/src/parsers/tableForm.js

@@ -0,0 +1,4 @@
+export default {
+  name: 'tableForm'
+}
+