perf: 优化表格组件

FightingDesign · Dec 17, 2023 · 4496dd8 · 4496dd8
1 parent 87da2c2
commit 4496dd8
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 168 deletions.
diff --git 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
diff --git 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
@@ -1,15 +1,13 @@
 .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 {
@@ -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
@@ -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>