fix(table): 修复column的align、sorter类型声明错误

xiaohe0601 · xiaohe0601 · commit d936d5ffde9e · 2025-01-15T15:30:23.000+08:00
diff --git a/packages/nutui/components/table/index.scss b/packages/nutui/components/table/index.scss
@@ -1,5 +1,3 @@
-/* stylelint-disable no-duplicate-selectors */
-
 .nut-theme-dark {
   .nut-table {
     &__main {
@@ -14,14 +12,14 @@
         }
 
         .nut-table__main__body {
-          &__tr:nth-child(odd) {
-            background-color: $dark-color-gray;
-          }
-        }
+          &__tr {
+            &:nth-child(odd) {
+              background-color: $dark-color-gray;
+            }
 
-        .nut-table__main__body {
-          &__tr:nth-child(even) {
-            background-color: $dark-background3;
+            &:nth-child(even) {
+              background-color: $dark-background3;
+            }
           }
         }
       }
@@ -59,14 +57,14 @@
       }
 
       .nut-table__main__body {
-        &__tr:nth-child(odd) {
-          background-color: $table-tr-odd-bg-color;
-        }
-      }
+        &__tr {
+          &:nth-child(odd) {
+            background-color: $table-tr-odd-bg-color;
+          }
 
-      .nut-table__main__body {
-        &__tr:nth-child(even) {
-          background-color: $table-tr-even-bg-color;
+          &:nth-child(even) {
+            background-color: $table-tr-even-bg-color;
+          }
         }
       }
     }
diff --git a/packages/nutui/components/table/table.vue b/packages/nutui/components/table/table.vue
@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { computed, defineComponent, reactive, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, defineComponent, ref, useSlots, watch } from 'vue'
 import { PREFIX } from '../_constants'
 import { getMainClass } from '../_utils'
 import { useTranslate } from '../../locale'
@@ -9,63 +9,73 @@ import { tableEmits, tableProps } from './table'
 import type { TableColumnProps } from './types'
 
 const props = defineProps(tableProps)
+
 const emit = defineEmits(tableEmits)
-const state = reactive({
-  curData: props.data,
-})
+
+const slots = useSlots()
+
 const classes = computed(() => {
   return getMainClass(props, componentName)
 })
 
-function cellClasses(item: TableColumnProps) {
+const mainClasses = computed(() => {
+  return {
+    'nut-table__main--striped': props.striped,
+  }
+})
+
+const nodataClasses = computed(() => {
+  return {
+    'nut-table__nodata--border': props.bordered,
+  }
+})
+
+const innerData = ref(props.data)
+
+const innerRenders = computed(() => {
+  return props.columns.map((columns) => {
+    return [columns.key, columns.render]
+  })
+})
+
+function getCellItemClasses(item: TableColumnProps) {
   return {
     'nut-table__main__head__tr--border': props.bordered,
-    [`nut-table__main__head__tr--align${item.align ? item.align : ''}`]: true,
+    [`nut-table__main__head__tr--align${item.align || ''}`]: true,
   }
 }
 
-function _stylehead(item: TableColumnProps) {
-  return item.stylehead ? item.stylehead : ''
-}
-function _stylecolumn(item: TableColumnProps) {
-  return item.stylecolumn ? item.stylecolumn : ''
+function getColumnItem(key: string) {
+  return props.columns.find(item => item.key === key)!
 }
 
-function getColumnItem(value: string): TableColumnProps {
-  return props.columns.filter((item: TableColumnProps) => item.key === value)[0]
-}
-function getColumnItemStyle(value: string) {
-  const style = props.columns.filter((item: TableColumnProps) => item.key === value)
-  return style[0].stylecolumn ? style[0].stylecolumn : ''
+function getColumnItemStyle(key: string) {
+  return getColumnItem(key).stylecolumn || ''
 }
+
 function handleSorterClick(item: TableColumnProps) {
-  if (item.sorter) {
-    emit('sorter', item)
-    state.curData
-            = typeof item.sorter === 'function'
-        ? state.curData.sort(item.sorter)
-        : item.sorter === 'default'
-          ? state.curData.sort()
-          : state.curData
+  if (!item.sorter) {
+    return
   }
-}
 
-function sortDataItem() {
-  return props.columns.map((columns: TableColumnProps) => {
-    return [columns.key, columns.render]
-  })
+  emit('sorter', item)
+
+  if (typeof item.sorter === 'function') {
+    innerData.value.sort(item.sorter)
+  }
+  else if (item.sorter === 'default') {
+    innerData.value.sort()
+  }
 }
 
-watch(
-  () => props.data,
-  (val) => {
-    state.curData = val.slice()
-  },
-)
+watch(() => props.data, (value) => {
+  innerData.value = value.slice()
+})
 </script>
 
 <script lang="ts">
 const componentName = `${PREFIX}-table`
+
 const { translate } = useTranslate(componentName)
 
 export default defineComponent({
@@ -79,67 +89,70 @@ export default defineComponent({
 </script>
 
 <template>
-  <view :class="classes" :style="customStyle">
-    <view class="nut-table__main" :class="{ 'nut-table__main--striped': striped }">
+  <view :class="classes" :style="props.customStyle">
+    <view class="nut-table__main" :class="mainClasses">
       <view class="nut-table__main__head">
         <view class="nut-table__main__head__tr">
           <view
-            v-for="item in columns"
+            v-for="item in props.columns"
             :key="item.key"
             class="nut-table__main__head__tr__th"
-            :class="cellClasses(item)"
+            :class="getCellItemClasses(item)"
             :style="item.stylehead"
             @click="handleSorterClick(item)"
           >
             {{ item.title }}
-            <!-- <slot name="icon" > -->
+
             <NutIcon v-if="item.sorter" name="down-arrow" size="12px" />
-            <!-- </slot> -->
           </view>
         </view>
       </view>
+
       <view class="nut-table__main__body">
-        <view v-for="item in state.curData" :key="item" class="nut-table__main__body__tr">
+        <view v-for="item in innerData" :key="item" class="nut-table__main__body__tr">
           <view
-            v-for="[value, render] in sortDataItem()"
-            :key="value as string"
+            v-for="[key, render] in innerRenders"
+            :key="key as string"
             class="nut-table__main__body__tr__td"
-            :class="cellClasses(getColumnItem(value as string))"
-            :style="getColumnItemStyle(value as string)"
+            :class="getCellItemClasses(getColumnItem(key as string))"
+            :style="getColumnItemStyle(key as string)"
           >
             <!-- #ifdef H5 -->
             <RenderColumn
-              v-if="typeof item[value as string] === 'function' || typeof render === 'function'"
-              :slots="[render, item[value as string]]"
+              v-if="typeof item[key as string] === 'function' || typeof render === 'function'"
+              :slots="[render, item[key as string]]"
               :record="item"
             />
+
             <view v-else>
-              {{ item[value as string] }}
+              {{ item[key as string] }}
             </view>
             <!-- #endif -->
+
             <!-- #ifndef H5 -->
             <view>
-              {{ item[value as string] }}
+              {{ item[key as string] }}
             </view>
             <!-- #endif -->
           </view>
         </view>
       </view>
     </view>
-    <view v-if="summary" class="nut-table__summary">
-      <rich-text class="nut-table__summary__text" :nodes="summary().value" />
+
+    <view v-if="props.summary" class="nut-table__summary">
+      <rich-text class="nut-table__summary__text" :nodes="props.summary().value" />
     </view>
-    <view v-if="!state.curData.length" class="nut-table__nodata">
-      <div class="nut-table__nodata" :class="{ 'nut-table__nodata--border': bordered }">
-        <slot name="nodata" />
-        <div v-if="!$slots.nodata" class="nut-table__nodata__text">
-          {{ translate('noData') }}
-        </div>
-      </div>
+
+    <view v-if="innerData.length <= 0" class="nut-table__nodata" :class="nodataClasses">
+      <slot v-if="slots.nodata" name="nodata" />
+
+      <view v-else class="nut-table__nodata__text">
+        {{ translate('noData') }}
+      </view>
     </view>
   </view>
 </template>
 
 <style lang="scss">
-@import './index';
+@import "./index";
 </style>
diff --git a/packages/nutui/components/table/types.ts b/packages/nutui/components/table/types.ts
@@ -12,7 +12,7 @@ export interface TableColumnProps {
   /**
    * @description 列的对齐方式，可选值`left`,`center`
    */
-  align?: 'left' | 'right'
+  align?: 'left' | 'center' | 'right'
   /**
    * @description 表头样式
    */
@@ -22,12 +22,12 @@ export interface TableColumnProps {
    */
   stylecolumn?: string
   /**
-   * @description 排序，可选值有 `true`,`function`, `default`, 其中 `default`表示点击之后可能会依赖接口, `function`可以返回具体的排序函数, `default`表示采用默认的排序算法
+   * @description 排序，可选值有 `true`,`function`, `default`, 其中 `true`表示点击之后可能会依赖接口, `function`可以返回具体的排序函数, `default`表示采用默认的排序算法
    * @param row1
    * @param row2
    * @returns
    */
-  sorter?: (row1: any, row2: any) => number
+  sorter?: boolean | 'default' | ((row1: any, row2: any) => number)
   /**
    * @description 自定义渲染列数据，优先级高,仅支持`H5`
    * @param rowData

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-/* stylelint-disable no-duplicate-selectors */`
`2`		`-`
`3`	`1`	`.nut-theme-dark {`
`4`	`2`	`.nut-table {`
`5`	`3`	`&__main {`
`@@ -14,14 +12,14 @@`
`14`	`12`	`}`
`15`	`13`
`16`	`14`	`.nut-table__main__body {`
`17`		`- &__tr:nth-child(odd) {`
`18`		`- background-color: $dark-color-gray;`
`19`		`- }`
`20`		`- }`
	`15`	`+ &__tr {`
	`16`	`+ &:nth-child(odd) {`
	`17`	`+ background-color: $dark-color-gray;`
	`18`	`+ }`
`21`	`19`
`22`		`- .nut-table__main__body {`
`23`		`- &__tr:nth-child(even) {`
`24`		`- background-color: $dark-background3;`
	`20`	`+ &:nth-child(even) {`
	`21`	`+ background-color: $dark-background3;`
	`22`	`+ }`
`25`	`23`	`}`
`26`	`24`	`}`
`27`	`25`	`}`
`@@ -59,14 +57,14 @@`
`59`	`57`	`}`
`60`	`58`
`61`	`59`	`.nut-table__main__body {`
`62`		`- &__tr:nth-child(odd) {`
`63`		`- background-color: $table-tr-odd-bg-color;`
`64`		`- }`
`65`		`- }`
	`60`	`+ &__tr {`
	`61`	`+ &:nth-child(odd) {`
	`62`	`+ background-color: $table-tr-odd-bg-color;`
	`63`	`+ }`
`66`	`64`
`67`		`- .nut-table__main__body {`
`68`		`- &__tr:nth-child(even) {`
`69`		`- background-color: $table-tr-even-bg-color;`
	`65`	`+ &:nth-child(even) {`
	`66`	`+ background-color: $table-tr-even-bg-color;`
	`67`	`+ }`
`70`	`68`	`}`
`71`	`69`	`}`
`72`	`70`	`}`