1

src/components/tables/index.vue

@@ -90,13 +90,27 @@ export default {
     },
 
     insideColumns() {
-      let columns = this.columns.map((item, index) => {
-        // 设置默认对齐方式
-        if (!item.align) {
-          item.align = 'center'
+      // 确保 columns 是数组
+      if (!Array.isArray(this.columns) || this.columns.length === 0) {
+        return []
+      }
       
-          if (item.children && item.children.length > 0) {
-            item.children = item.children.map((sonItem) => {
+      let columns = this.columns.map((item, index) => {
+        // 确保 item 是对象
+        if (!item || typeof item !== 'object') {
+          console.warn(`[Tables] 列配置第 ${index} 项格式不正确:`, item)
+          return null
+        }
+        
+        // 创建新对象，避免直接修改原对象
+        let column = { ...item }
+        
+        // 设置默认对齐方式
+        if (!column.align) {
+          column.align = 'center'
+
+          if (column.children && column.children.length > 0) {
+            column.children = column.children.map((sonItem) => {
               if (!sonItem.align) {
                 sonItem.align = 'center'
               }
@@ -107,12 +121,12 @@ export default {
 
         // 确保列宽设置正确，优先使用 width，其次使用 minWidth
         // 如果都没有设置，则设置默认 minWidth
-        if (!item.width && !item.minWidth) {
-          item.minWidth = 120
+        if (!column.width && !column.minWidth) {
+          column.minWidth = 120
         }
 
-        return item
-      })
+        return column
+      }).filter(item => item !== null) // 过滤掉无效的列配置
 
       return columns
     },
@@ -139,11 +153,27 @@ export default {
     },
 
     handleTableData() {
-      let values = this.value || []
-      let data = values.filter((p) => p)
-      this.insideTableData = data.map((item, index) => {
-        let res = item
-        return res
+      // 确保 value 是数组
+      let values = Array.isArray(this.value) ? this.value : []
+      
+      // 过滤掉 null 和 undefined，但保留其他 falsy 值（如 0、false、空字符串等）
+      let data = values.filter((p) => p !== null && p !== undefined)
+      
+      // 使用 $set 确保响应式更新
+      this.$set(this, 'insideTableData', data.map((item, index) => {
+        // 确保每个数据项都是对象
+        if (typeof item !== 'object' || item === null) {
+          return { value: item }
+        }
+        return item
+      }))
+      
+      // 强制更新表格（如果表格已渲染）
+      this.$nextTick(() => {
+        if (this.$refs.tablesMain) {
+          // 触发表格重新渲染
+          this.$refs.tablesMain.$forceUpdate()
+        }
       })
     },
     onChangePage(page) {
@@ -177,11 +207,28 @@ export default {
     },
   },
   watch: {
-    value(val) {
+    // 监听 value 变化
+    value: {
+      handler(val) {
         this.handleTableData()
       },
+      immediate: true,
+      deep: true
+    },
+    // 监听 columns 变化，确保列配置更新时表格重新渲染
+    columns: {
+      handler() {
+        this.$nextTick(() => {
+          if (this.$refs.tablesMain) {
+            this.$refs.tablesMain.$forceUpdate()
+          }
+        })
+      },
+      deep: true
+    }
   },
   mounted() {
+    // 确保数据已处理
     this.handleTableData()
 
     // 自适应高度
@@ -196,6 +243,14 @@ export default {
 
       // 动态计算偏移量
       this.calculateOffset()
+      
+      // 如果数据或列配置为空，输出警告
+      if (!this.insideTableData || this.insideTableData.length === 0) {
+        console.warn('[Tables] 表格数据为空，请检查 value 属性是否正确绑定')
+      }
+      if (!this.columns || this.columns.length === 0) {
+        console.warn('[Tables] 表格列配置为空，请检查 columns 属性是否正确绑定')
+      }
     })
 
     // 监听窗口大小变化，重新计算偏移量