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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.15",
+  "version": "3.3.16",
   "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

@@ -61,7 +61,19 @@ export default {
     },
     min: Number,
     max: Number,
-    disabled: Boolean
+    disabled: Boolean,
+    showIndexColumn: {
+      type: Boolean,
+      default: true
+    },
+    showOperationColumn: {
+      type: Boolean,
+      default: true
+    },
+    headerBackgroundColor: {
+      type: String,
+      default: ''
+    }
   },
   watch: {
     modelValue: {
@@ -71,8 +83,18 @@ export default {
       deep: true
     },
     'formCreateInject.preview': function (n) {
-      this.emptyRule.children[0].props.colspan =
-        this.columns.length + (n ? 1 : 2)
+      this.emptyRule.children[0].props.colspan = this.getEmptyColspan()
+    },
+    showIndexColumn() {
+      this.loadRule()
+      this.updateTable()
+    },
+    showOperationColumn() {
+      this.loadRule()
+      this.updateTable()
+    },
+    headerBackgroundColor() {
+      this.loadRule()
     }
   },
   data() {
@@ -97,8 +119,7 @@ export default {
             native: true,
             subRule: true,
             props: {
-              colspan:
-                this.columns.length + (this.formCreateInject.preview ? 1 : 2)
+              colspan: this.getEmptyColspan()
             },
             children: [this.formCreateInject.t('dataEmpty') || '暂无数据']
           }
@@ -107,6 +128,11 @@ export default {
     }
   },
   methods: {
+    getEmptyColspan() {
+      return this.columns.length + 
+        (this.showIndexColumn ? 1 : 0) + 
+        (this.showOperationColumn ? (this.formCreateInject.preview ? 0 : 1) : 0)
+    },
     formChange() {
       this.updateValue()
     },
@@ -207,39 +233,58 @@ export default {
     },
     updateRaw(tr) {
       const idx = this.trs.indexOf(tr)
-      tr.children[0].props.innerText = idx + 1
-      tr.children[tr.children.length - 1].children[0].props.onClick = () => {
-        this.delRaw(idx)
+      // 更新序号列
+      if (this.showIndexColumn && tr.children[0]) {
+        tr.children[0].props.innerText = idx + 1
+      }
+      // 更新操作列的删除按钮
+      if (this.showOperationColumn && tr.children[tr.children.length - 1]) {
+        const operationCell = tr.children[tr.children.length - 1]
+        if (operationCell.children && operationCell.children[0]) {
+          operationCell.children[0].props.onClick = () => {
+            this.delRaw(idx)
+          }
+        }
       }
     },
     loadRule() {
-      const header = [
-        {
+      const header = []
+      let body = []
+      
+      // 序号列
+      if (this.showIndexColumn) {
+        header.push({
           type: 'th',
           native: true,
           class: '_fc-tf-head-idx',
+          style: this.headerBackgroundColor ? {
+            backgroundColor: this.headerBackgroundColor
+          } : {},
           props: {
             innerText: '#'
           }
-        }
-      ]
-      let body = [
-        {
+        })
+        body.push({
           type: 'td',
           class: '_fc-tf-idx',
           native: true,
           props: {
             innerText: '0'
           }
-        }
-      ]
+        })
+      }
+      
+      // 数据列
       this.columns.forEach((column) => {
         header.push({
           type: 'th',
           native: true,
           style: {
             ...(column.style || {}),
-            textAlign: column.align || 'center'
+            textAlign: column.align || 'center',
+            ...(this.headerBackgroundColor ? {
+              backgroundColor: this.headerBackgroundColor
+            } : {})
           },
           class: column.required ? '_fc-tf-head-required' : '',
           props: {
@@ -252,27 +297,34 @@ export default {
           children: [...(column.rule || [])]
         })
       })
-      header.push({
-        type: 'th',
-        native: true,
-        class: '_fc-tf-edit fc-clock',
-        props: {
-          innerText: this.formCreateInject.t('operation') || '操作'
-        }
-      })
-      body.push({
-        type: 'td',
-        native: true,
-        class: '_fc-tf-btn fc-clock',
-        children: [
-          {
-            type: 'i',
-            native: true,
-            class: 'fc-icon icon-delete',
-            props: {}
+      
+      // 操作列
+      if (this.showOperationColumn) {
+        header.push({
+          type: 'th',
+          native: true,
+          class: '_fc-tf-edit fc-clock',
+          style: this.headerBackgroundColor ? {
+            backgroundColor: this.headerBackgroundColor
+          } : {},
+          props: {
+            innerText: this.formCreateInject.t('operation') || '操作'
           }
-        ]
-      })
+        })
+        body.push({
+          type: 'td',
+          native: true,
+          class: '_fc-tf-btn fc-clock',
+          children: [
+            {
+              type: 'i',
+              native: true,
+              class: 'fc-icon icon-delete',
+              props: {}
+            }
+          ]
+        })
+      }
       this.copyTrs = this.formCreateInject.form.toJson([
         {
           type: 'tr',