From 4496dd8e7fff99a450bc3366078739d0cf67ddb8 Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Sun, 17 Dec 2023 17:53:00 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fighting-design/table/src/props.ts   |   2 +
 .../fighting-design/table/src/table copy.vue  | 153 ------------------
 packages/fighting-design/table/src/table.vue  |  16 +-
 packages/fighting-theme/src/table.scss        |   6 +-
 start/src/App.vue                             |  25 ++-
 5 files changed, 34 insertions(+), 168 deletions(-)
 delete mode 100644 packages/fighting-design/table/src/table copy.vue

diff --git a/packages/fighting-design/table/src/props.ts b/packages/fighting-design/table/src/props.ts
index b9f2b4d003..1cea0411ae 100644
--- a/packages/fighting-design/table/src/props.ts
+++ b/packages/fighting-design/table/src/props.ts
@@ -31,6 +31,8 @@ export const Props = {
   zebraColor: setStringProp(),
   /** 自定义表格高度 */
   height: setStringNumberProp(),
+  /** 自定义表格宽度 */
+  width: setStringNumberProp(),
   /** 自定义背景颜色 */
   bgColor: setStringProp(),
   /** 自定义头部背景颜色 */
diff --git a/packages/fighting-design/table/src/table copy.vue b/packages/fighting-design/table/src/table copy.vue
deleted file mode 100644
index 2c18fbc049..0000000000
--- a/packages/fighting-design/table/src/table copy.vue	
+++ /dev/null
@@ -1,153 +0,0 @@
-<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>
diff --git a/packages/fighting-design/table/src/table.vue b/packages/fighting-design/table/src/table.vue
index 6db3dcff3f..812ff2d5c2 100644
--- a/packages/fighting-design/table/src/table.vue
+++ b/packages/fighting-design/table/src/table.vue
@@ -71,16 +71,18 @@
               https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup
              -->
             <colgroup>
+              <col v-if="num" />
               <col
                 v-for="(column, index) in columns"
                 :key="index"
-                :width="sizeChange(column.width)"
+                :span="index + 1"
+                :width="column.width"
               />
             </colgroup>
 
             <thead :align="align">
               <tr>
-                <th v-if="num">序号</th>
+                <th v-if="num">#</th>
                 <th v-for="(column, index) in columns" :key="index">
                   <!-- 如果是一个函数，则调用方法 -->
                   <template v-if="isFunction(column.title)">
@@ -100,19 +102,21 @@
         <!-- 身体 -->
         <div class="f-table__body">
           <!-- 有数据 -->
-          <table class="f-table__table">
+          <table class="f-table__table" :style="{ width: sizeChange(width) }">
             <colgroup>
+              <col v-if="num" />
               <col
                 v-for="(column, index) in columns"
                 :key="index"
-                :width="sizeChange(column.width)"
+                :span="1"
+                :width="column.width"
               />
             </colgroup>
 
             <!-- 在没有限制高度时候展示的表头 -->
             <thead v-if="!isHead" :align="align">
               <tr>
-                <th v-if="num">序号</th>
+                <th v-if="num">#</th>
                 <th v-for="(column, index) in columns" :key="index">
                   <!-- 如果是一个函数，则调用方法 -->
                   <template v-if="isFunction(column.title)">
@@ -128,7 +132,7 @@
             </thead>
 
             <!-- 主要渲染内容的表体 -->
-            <tbody v-if="data && data.length" :align="align">
+            <tbody v-if="data && data.length" ref="tableRef" :align="align">
               <tr v-for="(item, m) in data" :key="m">
                 <!-- 序号列表 -->
                 <td v-if="num">{{ m + 1 }}</td>
diff --git a/packages/fighting-theme/src/table.scss b/packages/fighting-theme/src/table.scss
index e3a4e18b6e..482f85d82b 100644
--- a/packages/fighting-theme/src/table.scss
+++ b/packages/fighting-theme/src/table.scss
@@ -1,7 +1,6 @@
 .f-table {
   display: block;
   position: relative;
-  width: 100%;
 
   // 主容器
   &__container {
@@ -9,7 +8,6 @@
     box-sizing: border-box;
     overflow: hidden;
     background-color: var(--table-bg-color, #fff);
-    width: 100%;
 
     // 身体
     .f-table__body {
@@ -19,7 +17,6 @@
 
     // table 公共样式
     table {
-      width: 100%;
       border-spacing: 0;
       border-collapse: collapse;
       table-layout: fixed;
@@ -29,7 +26,7 @@
       // 头部
       thead {
         background-color: var(--table-head-bg-color, #f7f7f7);
-        font-size: 16px;
+        font-size: 15px;
         color: #4e4e4e;
         height: 45px;
         position: relative;
@@ -46,6 +43,7 @@
             font-size: 15px;
             color: #4f4f4f;
             word-wrap: break-word;
+            font-weight: 600;
           }
         }
       }
diff --git a/start/src/App.vue b/start/src/App.vue
index 03ef64ebd8..b324991df1 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -10,27 +10,40 @@
     {
       title: '姓名',
       key: 'name'
+      // width: 300
+    },
+    {
+      title: '姓名',
+      key: 'name'
+      // width: 300
+    },
+    {
+      title: '姓名',
+      key: 'name'
+      // width: 300
     },
     {
       // title: '年龄',
       title: h => {
         return h('div', { class: 'table-wrapper' }, [
-          h(FButton, { type: 'info' }, { default: () => '按钮1' })
+          h(FButton, { type: 'info' }, { default: () => '年龄' })
         ])
       },
       key: 'age'
+      // width: 500
     },
     {
       title: '介绍',
       key: 'introduce'
+      // width: 500
     },
     // RenderReturn
     {
       title: '操作',
       render: (h, a, v, cc) => {
-        console.log(h, a, v, cc)
+        // console.log(h, a, v, cc)
         return h('div', { class: 'table-wrapper' }, [
-          h(FButton, { type: 'info' }, { default: () => '按钮1' }),
+          h(FButton, { type: 'info', round: true }, { default: () => '按钮1' }),
           h(FButton, { type: 'info' }, { default: () => '按钮2' })
         ])
       }
@@ -41,7 +54,8 @@
     {
       name: '卡莉斯塔',
       age: '22',
-      introduce: 'dhasjhdjahdjasdhjadhasjhdasjhdasjhdjdj'
+      introduce:
+        '大环境的还是决定大数据等哈就和大家安徽的就撒欢的讲话大声讲话打击很大今后的骄傲和打击很大机会大家'
     },
     {
       name: '艾希',
@@ -62,7 +76,8 @@
 </script>
 
 <template>
-  <f-table :data="data" :columns="columns" />
+  <!-- <f-table :data="data" num :width="1200" :columns="columns" /> -->
+  <f-table :data="data" num :columns="columns" />
 </template>
 
 <style>