@longhongguo/form-create-ant-design-vue 3.3.27 → 3.3.28

package/package.json

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

@@ -70,6 +70,10 @@ export default {
       type: Boolean,
       default: false
     },
+    selectField: {
+      type: String,
+      default: 'checked'
+    },
     showOperationColumn: {
       type: Boolean,
       default: true
@@ -197,14 +201,16 @@ export default {
         return
       }
       this.oldValue = str
-      // 清理超出范围的选中状态
-      const newSelectedRows = new Set()
-      this.selectedRows.forEach(idx => {
-        if (idx < this.modelValue.length) {
-          newSelectedRows.add(idx)
-        }
-      })
-      this.selectedRows = newSelectedRows
+      
+      // 从数据中读取选中状态，初始化 selectedRows
+      if (this.showSelectColumn) {
+        this.selectedRows.clear()
+        this.modelValue.forEach((data, idx) => {
+          if (data && data[this.selectField] === true) {
+            this.selectedRows.add(idx)
+          }
+        })
+      }
       
       this.trs = this.trs.splice(0, this.modelValue.length)
       if (!this.modelValue.length) {
@@ -265,9 +271,10 @@ export default {
       ) {
         return
       }
-      // 删除选中状态
+      // 删除数据行
+      this.trs.splice(idx, 1)
+      // 更新 selectedRows，删除当前索引，后续索引前移
       this.selectedRows.delete(idx)
-      // 更新后续行的索引
       const newSelectedRows = new Set()
       this.selectedRows.forEach(selectedIdx => {
         if (selectedIdx < idx) {
@@ -278,7 +285,6 @@ export default {
       })
       this.selectedRows = newSelectedRows
       
-      this.trs.splice(idx, 1)
       this.updateValue()
       if (this.trs.length) {
         this.trs.forEach((tr) => this.updateRaw(tr))
@@ -319,7 +325,9 @@ export default {
       // 更新选择列
       if (this.showSelectColumn && tr.children[colOffset]) {
         const selectCell = tr.children[colOffset]
-        const isSelected = this.selectedRows.has(idx)
+        // 从数据对象中读取选中状态
+        const rowData = this.modelValue[idx]
+        const isSelected = rowData && rowData[this.selectField] === true
         if (selectCell.children && selectCell.children[0]) {
           const checkbox = selectCell.children[0]
           checkbox.props.checked = isSelected
@@ -355,10 +363,18 @@ export default {
       }
     },
     toggleRowSelect(idx, checked) {
-      if (checked) {
-        this.selectedRows.add(idx)
-      } else {
-        this.selectedRows.delete(idx)
+      // 更新数据对象中的选中状态
+      const rowData = this.modelValue[idx]
+      if (rowData) {
+        if (checked) {
+          this.selectedRows.add(idx)
+          rowData[this.selectField] = true
+        } else {
+          this.selectedRows.delete(idx)
+          rowData[this.selectField] = false
+        }
+        // 触发数据更新
+        this.updateValue()
       }
       // 更新全选状态
       this.updateSelectAllState()
@@ -366,17 +382,20 @@ export default {
       this.$emit('select-change', Array.from(this.selectedRows))
     },
     toggleSelectAll(checked) {
-      if (checked) {
-        // 全选：排除空数据行
-        this.trs.forEach((tr, idx) => {
-          if (!tr._isEmpty) {
+      // 更新所有数据对象中的选中状态
+      this.modelValue.forEach((rowData, idx) => {
+        if (rowData) {
+          if (checked) {
             this.selectedRows.add(idx)
+            rowData[this.selectField] = true
+          } else {
+            this.selectedRows.delete(idx)
+            rowData[this.selectField] = false
           }
-        })
-      } else {
-        // 取消全选
-        this.selectedRows.clear()
-      }
+        }
+      })
+      // 触发数据更新
+      this.updateValue()
       // 更新所有行的选择状态
       this.trs.forEach((tr) => {
         if (!tr._isEmpty) {
@@ -389,16 +408,18 @@ export default {
     updateSelectAllState() {
       if (!this.showSelectColumn) return
       
-      const validRows = this.trs.filter(tr => !tr._isEmpty)
+      const validRows = this.modelValue.filter((rowData, idx) => {
+        const tr = this.trs[idx]
+        return tr && !tr._isEmpty
+      })
       if (validRows.length === 0) return
       
-      const allSelected = validRows.every((tr) => {
-        const actualIdx = this.trs.indexOf(tr)
-        return this.selectedRows.has(actualIdx)
+      // 从数据对象中读取选中状态
+      const allSelected = validRows.every((rowData) => {
+        return rowData && rowData[this.selectField] === true
       })
-      const someSelected = validRows.some((tr) => {
-        const actualIdx = this.trs.indexOf(tr)
-        return this.selectedRows.has(actualIdx)
+      const someSelected = validRows.some((rowData) => {
+        return rowData && rowData[this.selectField] === true
       })
       
       // 更新表头的全选checkbox（通过 DOM 操作）
@@ -449,6 +470,9 @@ export default {
           native: true,
           class: '_fc-tf-head-select',
           style: {
+            width: '40px',
+            minWidth: '40px',
+            maxWidth: '40px',
             textAlign: 'center',
             ...(this.headerBackgroundColor
               ? {
@@ -475,6 +499,9 @@ export default {
           class: '_fc-tf-select',
           native: true,
           style: {
+            width: '40px',
+            minWidth: '40px',
+            maxWidth: '40px',
             textAlign: 'center'
           },
           children: [