feat: 优化表格组件

FightingDesign · Dec 20, 2023 · 3edbb20 · 3edbb20
1 parent 8ea4bb2
commit 3edbb20
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.66.2 (2023-12-20)
+
+- 新增 `f-tabale` 组件 `select` 和 `on-select` 配置项
+
 ## 0.66.1 (2023-12-19)
 
 - 修复 `f-pagination` 组件在 `total` 小于 `page-size` 时候显示页码错误的问题

diff --git a/docs/components/table.md b/docs/components/table.md
@@ -396,7 +396,7 @@
       key: 'introduce'
     }
   ])
-  const data = ref([
+  const data2 = ref([
     {
       name: '卡莉斯塔',
       age: '22',
@@ -661,6 +661,71 @@
 
 :::
 
+## 多选的
+
+`select` 配置项，配合 `on-select` 回调可实现表格选择
+
+::: demo
+
+<template #source>
+<f-table :data="data" :columns="columns" select :on-select="onSelect" />
+</template>
+
+```html
+<template>
+  <f-table :data="data" :columns="columns" select :on-select="onSelect" />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import type { TableSelect } from 'fighting-design'
+
+  const onSelect: TableSelect = values => {
+    console.log(values)
+  }
+
+  const columns = ref([
+    {
+      title: '姓名',
+      key: 'name'
+    },
+    {
+      title: '年龄',
+      key: 'age'
+    },
+    {
+      title: '介绍',
+      key: 'introduce'
+    }
+  ])
+
+  const data = ref([
+    {
+      name: '卡莉斯塔',
+      age: '22',
+      introduce: '她的被动可以在发动攻击后进行小距离的跳跃'
+    },
+    {
+      name: '艾希',
+      age: '16',
+      introduce: '拥有强大减速和控制能力的远程射手'
+    },
+    {
+      name: '李青',
+      age: '34',
+      introduce: '非常优秀的打野英雄'
+    },
+    {
+      name: '贾克斯',
+      age: '109',
+      introduce: '取得优势的武器可以输出成吨的伤害'
+    }
+  ])
+</script>
+```
+
+:::
+
 ## Attributes
 
 | 参数            | 说明                 | 类型                                   | 可选值                  | 默认值 |
@@ -782,6 +847,10 @@ type TableSelect = (value: TableData) => void
   import demo1Vue from './demos/table/demo1.vue'
   import { FButton, FMessage } from 'fighting-design'
 
+  const onSelect = values => {
+    console.log(values)
+  }
+
   const columns = ref([
     {
       title: '姓名',

diff --git a/packages/fighting-design/table/src/table.vue b/packages/fighting-design/table/src/table.vue
@@ -65,6 +65,9 @@
   /** 是否选中所有 */
   const isSelectAll = computed({
     get: (): boolean => {
+      if (!formatData.value.length) {
+        return false
+      }
       return (formatData.value || []).every(item => item._select)
     },
     set: (value: boolean): boolean => {
@@ -127,22 +130,21 @@
               https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup
              -->
             <colgroup>
-              <col v-if="num" />
-              <col v-if="select" />
+              <col v-if="select" :width="50" :span="1" />
+              <col v-if="num" :width="50" :span="1" />
               <col
                 v-for="(column, index) in columns"
                 :key="index"
-                :span="index + 1"
                 :width="column.width"
               />
             </colgroup>
 
             <thead :align="align">
               <tr>
-                <th v-if="num">#</th>
                 <th v-if="select">
-                  <f-checkbox v-model="isSelectAll" />
+                  <f-checkbox v-model="isSelectAll" :disabled="!formatData.length" />
                 </th>
+                <th v-if="num">#</th>
                 <th v-for="(column, index) in columns" :key="index">
                   <!-- 如果是一个函数，则调用方法 -->
                   <template v-if="isFunction(column.title)">
@@ -164,8 +166,8 @@
           <!-- 有数据 -->
           <table v-if="formatData && formatData.length" class="f-table__table">
             <colgroup>
-              <col v-if="num" />
-              <col v-if="select" />
+              <col v-if="select" :width="50" :span="1" />
+              <col v-if="num" :width="50" :span="1" />
               <col
                 v-for="(column, index) in columns"
                 :key="index"
@@ -177,10 +179,10 @@
             <!-- 在没有限制高度时候展示的表头 -->
             <thead v-if="!isHead" :align="align">
               <tr>
-                <th v-if="num">#</th>
                 <th v-if="select">
-                  <f-checkbox v-model="isSelectAll" />
+                  <f-checkbox v-model="isSelectAll" :disabled="!formatData.length" />
                 </th>
+                <th v-if="num">#</th>
                 <th v-for="(column, index) in columns" :key="index">
                   <!-- 如果是一个函数，则调用方法 -->
                   <template v-if="isFunction(column.title)">
@@ -196,13 +198,12 @@
             </thead>
 
             <!-- 主要渲染内容的表体 -->
-            <tbody ref="tableRef" :align="align">
+            <tbody :align="align">
               <tr v-for="(item, m) in formatData" :key="m">
-                <!-- 序号列表 -->
-                <td v-if="num">{{ m + 1 }}</td>
                 <td v-if="select">
                   <f-checkbox v-model="item._select" :on-change="checkboxChange" />
                 </td>
+                <td v-if="num">{{ m + 1 }}</td>
 
                 <!-- 主内容 -->
                 <td v-for="(column, i) in columns" :key="i">
@@ -232,6 +233,7 @@
             <!-- 有数据 -->
             <table class="f-table__table">
               <colgroup>
+                <col v-if="select" :width="50" :span="1" />
                 <col v-if="num" />
                 <col
                   v-for="(column, index) in columns"
@@ -244,6 +246,9 @@
               <!-- 在没有限制高度时候展示的表头 -->
               <thead v-if="!isHead" :align="align">
                 <tr>
+                  <th v-if="select">
+                    <f-checkbox v-model="isSelectAll" :disabled="!formatData.length" />
+                  </th>
                   <th v-if="num">#</th>
                   <th v-for="(column, index) in columns" :key="index">
                     <!-- 如果是一个函数，则调用方法 -->

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,50 +1,5 @@
-<template>
-  <f-table :data="data" :columns="columns" select :on-select="onSelect" />
-</template>
+<script lang="ts" setup></script>
 
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import type { TableSelect } from 'fighting-design'
+<template></template>
 
-  const onSelect: TableSelect = values => {
-    console.log(values)
-  }
-
-  const columns = ref([
-    {
-      title: '姓名',
-      key: 'name'
-    },
-    {
-      title: '年龄',
-      key: 'age'
-    },
-    {
-      title: '介绍',
-      key: 'introduce'
-    }
-  ])
-
-  const data = ref([
-    {
-      name: '卡莉斯塔',
-      age: '22',
-      introduce: '她的被动可以在发动攻击后进行小距离的跳跃'
-    },
-    {
-      name: '艾希',
-      age: '16',
-      introduce: '拥有强大减速和控制能力的远程射手'
-    },
-    {
-      name: '李青',
-      age: '34',
-      introduce: '非常优秀的打野英雄'
-    },
-    {
-      name: '贾克斯',
-      age: '109',
-      introduce: '取得优势的武器可以输出成吨的伤害'
-    }
-  ])
-</script>
+<style lang="scss" scoped></style>