fix: 🐛 修复Table组件异步填充数据源无效的问题

✅ Closes: #445

Author: xuqingkai

src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue

@@ -27,7 +27,7 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { type CSSProperties, computed, ref } from 'vue'
+import { type CSSProperties, computed, ref, watch } from 'vue'
 import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
 import { tableColumnProps, type SortDirection } from './types'
 import { useParent } from '../composables/useParent'
@@ -42,7 +42,7 @@ const sortDirection = ref<SortDirection>(0) // 排序方向
 // 是否开启斑马纹
 const stripe = computed(() => {
   if (isDef(table)) {
-    return table.stripe
+    return table.props.stripe
   } else {
     return false
   }
@@ -53,7 +53,7 @@ const stripe = computed(() => {
  */
 const border = computed(() => {
   if (isDef(table)) {
-    return table.border
+    return table.props.border
   } else {
     return false
   }
@@ -64,7 +64,7 @@ const border = computed(() => {
  */
 const ellipsis = computed(() => {
   if (isDef(table)) {
-    return table.ellipsis
+    return table.props.ellipsis
   } else {
     return false
   }
@@ -100,7 +100,7 @@ const columnStyle = computed(() => {
  */
 const cellStyle = computed(() => {
   let style: CSSProperties = {}
-  const rowHeight: string | number = isDef(table) ? table.rowHeight : '80rpx' // 自定义行高
+  const rowHeight: string | number = isDef(table) ? table.props.rowHeight : '80rpx' // 自定义行高
   if (isDef(rowHeight)) {
     style['height'] = addUnit(rowHeight)
   }
@@ -115,7 +115,8 @@ const column = computed(() => {
   if (!isDef(table)) {
     return []
   }
-  const column: any[] = table.data.map((item) => {
+
+  const column: any[] = table.props.data.map((item) => {
     return item[props.prop]
   })
   return column
@@ -137,7 +138,7 @@ function getScope(index: number) {
   if (!isDef(table)) {
     return {}
   }
-  return table.data[index] || {}
+  return table.props.data[index] || {}
 }
 
 defineExpose({ sortDirection: sortDirection })

src/uni_modules/wot-design-uni/components/wd-table/types.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 11:36:12
- * @LastEditTime: 2024-06-06 19:11:32
+ * @LastEditTime: 2024-07-18 19:02:32
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-table\types.ts
@@ -53,7 +53,8 @@ export const tableProps = {
 
 export type TableProps = ExtractPropTypes<typeof tableProps>
 
-export type TableProvide = Omit<TableProps, 'index' | 'customStyle' | 'customClass'> & {
+export type TableProvide = {
+  props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'>
   scrollLeft: number
   rowClick: (index: number) => void
   getIsLastFixed: (column: { fixed: boolean; prop: string }) => boolean

src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue

@@ -71,7 +71,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { type CSSProperties, computed, watch, reactive, ref } from 'vue'
+import { type CSSProperties, computed, reactive, ref } from 'vue'
 import { addUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
 import type { SortDirection, TableColumn, TableColumnInstance, TableColumnProps } from '../wd-table-col/types'
 import { TABLE_KEY, tableProps, type TableProvide } from './types'
@@ -85,13 +85,7 @@ const props = defineProps(tableProps)
 const emit = defineEmits(['sort-method', 'row-click'])
 
 const reactiveState = reactive<TableProvide>({
-  data: props.data,
-  stripe: props.stripe,
-  border: props.border,
-  height: props.height,
-  rowHeight: props.rowHeight,
-  showHeader: props.showHeader,
-  ellipsis: props.ellipsis,
+  props,
   scrollLeft: 0,
   rowClick,
   getIsLastFixed,
@@ -115,61 +109,6 @@ const indexColumn = ref<TableColumnProps>({
 
 const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
 
-watch(
-  () => props.data,
-  (newValue) => {
-    reactiveState.data = newValue
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.stripe,
-  (newValue) => {
-    reactiveState.stripe = newValue
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.border,
-  (newValue) => {
-    reactiveState.border = newValue
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.height,
-  (newValue) => {
-    reactiveState.height = newValue
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.rowHeight,
-  (newValue) => {
-    reactiveState.rowHeight = newValue
-  },
-  { deep: true }
-)
-watch(
-  () => props.showHeader,
-  (newValue) => {
-    reactiveState.showHeader = newValue
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.ellipsis,
-  (newValue) => {
-    reactiveState.ellipsis = newValue
-  },
-  { deep: true }
-)
-
 /**
  * 容器样式
  */