From b122a34331c91803531b3fdd8d3484fa16a48d6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Fri, 19 Dec 2025 13:14:42 +0800 Subject: [PATCH] 1 --- src/components/tables/index.vue | 85 +++++++++++++++++++++++++++------ 1 file changed, 70 insertions(+), 15 deletions(-) diff --git a/src/components/tables/index.vue b/src/components/tables/index.vue index 70005c9..776dcfb 100644 --- a/src/components/tables/index.vue +++ b/src/components/tables/index.vue @@ -90,13 +90,27 @@ export default { }, insideColumns() { + // 确保 columns 是数组 + if (!Array.isArray(this.columns) || this.columns.length === 0) { + return [] + } + let columns = this.columns.map((item, index) => { + // 确保 item 是对象 + if (!item || typeof item !== 'object') { + console.warn(`[Tables] 列配置第 ${index} 项格式不正确:`, item) + return null + } + + // 创建新对象,避免直接修改原对象 + let column = { ...item } + // 设置默认对齐方式 - if (!item.align) { - item.align = 'center' + if (!column.align) { + column.align = 'center' - if (item.children && item.children.length > 0) { - item.children = item.children.map((sonItem) => { + 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) { - this.handleTableData() + // 监听 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 属性是否正确绑定') + } }) // 监听窗口大小变化,重新计算偏移量