浏览代码

fix(table): 解决渲染数据顺序不同步的问题

suzigang 3 年之前
父节点
当前提交
c3faf5e2bd

+ 8 - 1
src/packages/__VUE/table/common.ts

@@ -68,6 +68,12 @@ export const component = (componentName: string) => {
         }
       };
 
+      const sortDataItem = () => {
+        return props.columns.map((value: any) => {
+          return value.key;
+        });
+      };
+
       watch(
         () => props.data,
         (val) => {
@@ -80,7 +86,8 @@ export const component = (componentName: string) => {
         classes,
         cellClasses,
         getColumnItem,
-        handleSorterClick
+        handleSorterClick,
+        sortDataItem
       };
     }
   };

+ 2 - 2
src/packages/__VUE/table/demo.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, getCurrentInstance, onMounted, onUnmounted, h } from 'vue';
+import { reactive, toRefs, onMounted, onUnmounted, h } from 'vue';
 import { createComponent } from '../../utils/create';
 import { TableColumnProps } from './types';
 import { Toast } from '@/packages/nutui.vue';
@@ -138,8 +138,8 @@ export default createDemo({
       ],
       data1: [
         {
-          name: 'Tom',
           sex: '男',
+          name: 'Tom',
           record: '小学'
         },
         {

+ 1 - 1
src/packages/__VUE/table/index.taro.vue

@@ -21,7 +21,7 @@
           <span
             class="nut-table__main__body__tr__td"
             :class="cellClasses(getColumnItem(value))"
-            v-for="value in Object.keys(item)"
+            v-for="value in sortDataItem()"
             :key="value"
           >
             <RenderColumn :slots="item[value]" v-if="typeof item[value] === 'function'"></RenderColumn>

+ 1 - 1
src/packages/__VUE/table/index.vue

@@ -21,7 +21,7 @@
           <span
             class="nut-table__main__body__tr__td"
             :class="cellClasses(getColumnItem(value))"
-            v-for="value in Object.keys(item)"
+            v-for="value in sortDataItem()"
             :key="value"
           >
             {{ typeof item[value] !== 'function' ? item[value] : '' }}