perf: 优化表格组件

.eslintignore

@@ -10,3 +10,4 @@ fighting-add-component
 scripts/**
 fighting-eslint-config
 fighting-icon
+start

CHANGELOG.md

@@ -3,6 +3,7 @@
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
 - 修复 `f-table` 组件对于英文字母的文字不换行样式的问题
+- 修复 `f-table` 组件返回类型
 
 ## 0.65.0 (2023-12-12)
 

packages/fighting-design/table/src/interface.ts

@@ -6,7 +6,6 @@ export type { TableProps } from './props'
 export type TableAlign = 'left' | 'center' | 'right'
 
 /** 表格数据类型 */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type TableData = Record<string, any>[]
 
 /**
@@ -15,7 +14,6 @@ export type TableData = Record<string, any>[]
 type Children = string | number | boolean | VNode | null | Children[]
 
 /** 自定义模板函数渲染返回值类型 */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type RenderReturn = VNode<RendererNode, RendererElement, Record<string, any>>
 
 /**

packages/fighting-design/table/src/table copy.vue

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+  import { Props } from './props'
+  import { h } from 'vue'
+  import { useList } from '../../_hooks'
+  // import { FEmpty } from '../../empty'
+  import { TableColgroupVue } from '../components'
+  import { isFunction } from '../../_utils'
+  import type { VNode } from 'vue'
+  import type {
+    TableColumns,
+    TableRenderData,
+    TableRenderHeader,
+    TableRender
+  } from './interface'
+
+  defineOptions({ name: 'FTable' })
+
+  const prop = defineProps(Props)
+
+  const { styles, classes } = useList(prop, 'table')
+
+  /**
+   * 处理自定义渲染内容
+   *
+   * @param { Function } render 渲染函数
+   */
+  const columnsSlotData = (
+    render: TableRenderData,
+    row: Record<string, any>,
+    column: TableColumns,
+    index: number
+  ): VNode => {
+    return render(h as TableRender, row, column, index)
+  }
+
+  /**
+   * 处理自定义渲染内容
+   *
+   * @param { Function } render 渲染函数
+   */
+  const columnsSlotHeader = (
+    render: TableRenderHeader,
+    item: TableColumns,
+    index: number
+  ): VNode => {
+    return render(h as TableRender, item, index)
+  }
+
+  /** 样式列表 */
+  const styleList = styles(['zebraColor', 'bgColor', 'headBgColor', 'height'])
+
+  /** 类名列表 */
+  const classList = classes(['border', 'zebra'], 'f-table')
+</script>
+
+<template>
+  <div role="table" :class="classList" :style="styleList">
+    <div class="f-table__container">
+      <!-- 内置数据驱动表格 -->
+      <template v-if="columns || data">
+        <!-- 在限制高度时展示的头部 -->
+        <header v-if="height && showHead" class="f-table__header">
+          <table class="f-table__table">
+            <table-colgroup-vue :columns="columns" />
+
+            <thead :align="align">
+              <tr>
+                <th v-if="num">序号</th>
+                <th v-for="(column, index) in columns" :key="index">
+                  <!-- 如果是一个函数，则调用方法 -->
+                  <template v-if="isFunction(column.title)">
+                    <component :is="columnsSlotHeader(column.title, column, index)" />
+                  </template>
+
+                  <!-- 否则全部当字符串处理 -->
+                  <template v-else>
+                    {{ column.title }}
+                  </template>
+                </th>
+              </tr>
+            </thead>
+          </table>
+        </header>
+
+        <!-- 身体 -->
+        <div class="f-table__body">
+          <!-- 有数据 -->
+          <table class="f-table__table">
+            <table-colgroup-vue :columns="columns" />
+
+            <!-- 在没有限制高度时候展示的表头 -->
+            <thead v-if="!height && showHead" :align="align">
+              <tr>
+                <th v-if="num">序号</th>
+                <th v-for="(column, index) in columns" :key="index">
+                  <!-- 如果是一个函数，则调用方法 -->
+                  <template v-if="isFunction(column.title)">
+                    <component :is="columnsSlotHeader(column.title, column, index)" />
+                  </template>
+
+                  <!-- 否则全部当字符串处理 -->
+                  <template v-else>
+                    {{ column.title }}
+                  </template>
+                </th>
+              </tr>
+            </thead>
+
+            <!-- 主要渲染内容的表体 -->
+            <tbody v-if="data && data.length" :align="align">
+              <tr v-for="(item, m) in data" :key="m">
+                <!-- 序号列表 -->
+                <td v-if="num">{{ m + 1 }}</td>
+
+                <!-- 主内容 -->
+                <td v-for="(column, i) in columns" :key="i">
+                  <!-- 如果有自定义插槽渲染 -->
+                  <template v-if="column.render">
+                    <component :is="columnsSlotData(column.render, item, column, m)" />
+                  </template>
+
+                  <!-- 普通渲染数据 -->
+                  <template v-else>
+                    <template v-if="column.key">
+                      {{ item[column.key] }}
+                    </template>
+                  </template>
+                </td>
+              </tr>
+            </tbody>
+
+            <!-- 没有数据 -->
+            <!-- <tfoot v-else>
+              <slot>
+                <f-empty content="暂无数据" />
+              </slot>
+            </tfoot> -->
+
+            <!-- 自定义也叫 -->
+            <tfoot v-if="$slots.tfoot">
+              <slot name="tfoot" />
+            </tfoot>
+          </table>
+        </div>
+      </template>
+
+      <!-- 原生驱动表格 -->
+      <table v-else>
+        <slot />
+      </table>
+    </div>
+  </div>
+</template>

packages/fighting-design/table/src/table.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
   import { Props } from './props'
-  import { h } from 'vue'
+  import { h, computed } from 'vue'
   import { useList } from '../../_hooks'
   // import { FEmpty } from '../../empty'
-  import { TableColgroupVue } from '../components'
-  import { isFunction } from '../../_utils'
+  import { isFunction, sizeChange } from '../../_utils'
   import type { VNode } from 'vue'
   import type {
     TableColumns,
@@ -51,17 +50,33 @@
 
   /** 类名列表 */
   const classList = classes(['border', 'zebra'], 'f-table')
+
+  /** 是否显示表头 */
+  const isHead = computed((): boolean => {
+    return !!(prop.height && prop.showHead)
+  })
 </script>
 
 <template>
   <div role="table" :class="classList" :style="styleList">
+    <!-- 主要容器 -->
     <div class="f-table__container">
       <!-- 内置数据驱动表格 -->
       <template v-if="columns || data">
         <!-- 在限制高度时展示的头部 -->
-        <header v-if="height && showHead" class="f-table__header">
+        <div v-if="isHead" class="f-table__header">
           <table class="f-table__table">
-            <table-colgroup-vue :columns="columns" />
+            <!--
+              为表格的列定义属性，从而方便对表格列的样式和其他属性进行统一设置
+              https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup
+             -->
+            <colgroup>
+              <col
+                v-for="(column, index) in columns"
+                :key="index"
+                :width="sizeChange(column.width)"
+              />
+            </colgroup>
 
             <thead :align="align">
               <tr>
@@ -80,16 +95,22 @@
               </tr>
             </thead>
           </table>
-        </header>
+        </div>
 
         <!-- 身体 -->
-        <main class="f-table__body">
+        <div class="f-table__body">
           <!-- 有数据 -->
           <table class="f-table__table">
-            <table-colgroup-vue :columns="columns" />
+            <colgroup>
+              <col
+                v-for="(column, index) in columns"
+                :key="index"
+                :width="sizeChange(column.width)"
+              />
+            </colgroup>
 
             <!-- 在没有限制高度时候展示的表头 -->
-            <thead v-if="!height && showHead" :align="align">
+            <thead v-if="!isHead" :align="align">
               <tr>
                 <th v-if="num">序号</th>
                 <th v-for="(column, index) in columns" :key="index">
@@ -141,7 +162,7 @@
               <slot name="tfoot" />
             </tfoot>
           </table>
-        </main>
+        </div>
       </template>
 
       <!-- 原生驱动表格 -->

packages/fighting-eslint-config/index.js

@@ -267,7 +267,7 @@ module.exports = {
     // 禁止未使用的变量 https://typescript-eslint.io/rules/no-unused-vars
     '@typescript-eslint/no-unused-vars': 'error',
     // 不可以有 any https://typescript-eslint.io/rules/no-explicit-any/
-    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-explicit-any': 'off',
     // 不可以有 require https://typescript-eslint.io/rules/no-var-requires/
     '@typescript-eslint/no-var-requires': 'error',
     // 带有默认值的函数参数在最后 https://typescript-eslint.io/rules/default-param-last

packages/fighting-theme/src/table.scss

@@ -1,26 +1,20 @@
 .f-table {
+  display: block;
+  position: relative;
+  width: 100%;
+
   // 主容器
   &__container {
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
     background-color: var(--table-bg-color, #fff);
+    width: 100%;
 
     // 身体
     .f-table__body {
       height: var(--table-height);
       overflow: auto;
-
-      // 滚动条
-      &::-webkit-scrollbar {
-        width: 7px;
-      }
-
-      // 滚动滑块
-      &::-webkit-scrollbar-thumb {
-        background-color: #ddd;
-        border-radius: 6px;
-      }
     }
 
     // table 公共样式
@@ -32,6 +26,7 @@
       text-align: left;
       display: inline-table;
 
+      // 头部
       thead {
         background-color: var(--table-head-bg-color, #f7f7f7);
         font-size: 16px;
@@ -55,6 +50,7 @@
         }
       }
 
+      // 身体
       tbody {
         font-size: 16px;
         color: #4e4e4e;