feat: table 新增 select 和 on-select 配置项

docs/components/table.md

@@ -663,19 +663,21 @@
 
 ## Attributes
 
-| 参数            | 说明               | 类型                                 | 可选值                  | 默认值 |
-| --------------- | ------------------ | ------------------------------------ | ----------------------- | ------ |
-| `data`          | 数据列表           | array                                | ——                      | ——     |
-| `columns`       | 标题数据           | array                                | ——                      | ——     |
-| `align`         | 内容对齐方式       | <a href="#tablealign">TableAlign</a> | `left` `center` `right` | left   |
-| `border`        | 是否显示边框       | boolean                              | ——                      | false  |
-| `num`           | 是否显示序号       | boolean                              | ——                      | false  |
-| `zebra`         | 是否显示斑马纹     | boolean                              | ——                      | false  |
-| `zebra-color`   | 自定义斑马纹颜色   | string                               | ——                      | ——     |
-| `height`        | 自定义表格内容高度 | string / number                      | ——                      | ——     |
-| `bg-color`      | 自定义背景颜色     | string                               | ——                      | ——     |
-| `head-bg-color` | 自定义头部背景颜色 | string                               | ——                      | ——     |
-| `show-head`     | 是否展示头部       | boolean                              | ——                      | true   |
+| 参数            | 说明                 | 类型                                   | 可选值                  | 默认值 |
+| --------------- | -------------------- | -------------------------------------- | ----------------------- | ------ |
+| `data`          | 数据列表             | array                                  | ——                      | ——     |
+| `columns`       | 标题数据             | array                                  | ——                      | ——     |
+| `align`         | 内容对齐方式         | <a href="#tablealign">TableAlign</a>   | `left` `center` `right` | left   |
+| `border`        | 是否显示边框         | boolean                                | ——                      | false  |
+| `num`           | 是否显示序号         | boolean                                | ——                      | false  |
+| `zebra`         | 是否显示斑马纹       | boolean                                | ——                      | false  |
+| `zebra-color`   | 自定义斑马纹颜色     | string                                 | ——                      | ——     |
+| `height`        | 自定义表格内容高度   | string / number                        | ——                      | ——     |
+| `bg-color`      | 自定义背景颜色       | string                                 | ——                      | ——     |
+| `head-bg-color` | 自定义头部背景颜色   | string                                 | ——                      | ——     |
+| `show-head`     | 是否展示头部         | boolean                                | ——                      | true   |
+| `select`        | 是否可多选           | boolean                                | ——                      | false  |
+| `on-select`     | 选中值改变触发的回调 | <a href="#tableselect">TableSelect</a> | ——                      | ——     |
 
 ## Slots
 
@@ -696,7 +698,8 @@ import type {
   TableAlign,
   TableDate,
   TableRenderReturn,
-  TableColumns
+  TableColumns,
+  TableSelect
 } from 'fighting-design'
 ```
 
@@ -762,6 +765,12 @@ type TableRenderData = (
 ) => TableRenderReturn
 ```
 
+### TableSelect
+
+```ts
+type TableSelect = (value: TableData) => void
+```
+
 ## Contributors
 
 <a href="https://github.com/Tyh2001" target="_blank">

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

@@ -75,3 +75,10 @@ export interface TableColumns {
   width?: number | string | undefined
   render?: TableRenderData
 }
+
+/**
+ * 选择器改变触发的回调类型
+ * 
+ * @param { Array } values 选中的数据集合
+ */
+export type TableSelect = (value: TableData) => void

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

@@ -2,7 +2,8 @@ import {
   setBooleanProp,
   setStringProp,
   setStringNumberProp,
-  setArrayProp
+  setArrayProp,
+  setFunctionProp
 } from '../../_utils'
 import type { ExtractPropTypes } from 'vue'
 import type { TableAlign, TableData, TableColumns } from './interface'
@@ -23,6 +24,8 @@ export const Props = {
   }),
   /** 是否显示边框 */
   border: setBooleanProp(),
+  /** 是否可选择 */
+  select: setBooleanProp(),
   /** 是否显示序号 */
   num: setBooleanProp(),
   /** 是否显示斑马纹 */
@@ -38,7 +41,9 @@ export const Props = {
   /** 自定义头部背景颜色 */
   headBgColor: setStringProp(),
   /** 是否展示头部 */
-  showHead: setBooleanProp(true)
+  showHead: setBooleanProp(true),
+  /** 切换选项触发的回调 */
+  onSelect: setFunctionProp()
 } as const
 
 /** table 组件 props 类型 */

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

@@ -1,21 +1,24 @@
 <script lang="ts" setup>
   import { Props } from './props'
-  import { h, computed } from 'vue'
-  import { useList } from '../../_hooks'
+  import { h, computed, ref } from 'vue'
+  import { useList, useRun } from '../../_hooks'
   import { FEmpty } from '../../empty'
-  import { isFunction } from '../../_utils'
+  import { FCheckbox } from '../../checkbox'
+  import { isFunction, isArray } from '../../_utils'
   import type { VNode } from 'vue'
   import type {
     TableColumns,
     TableRenderData,
     TableRenderTitle,
-    TableRender
+    TableRender,
+    TableData
   } from './interface'
 
   defineOptions({ name: 'FTable' })
 
   const prop = defineProps(Props)
 
+  const { run } = useRun()
   const { styles, classes } = useList(prop, 'table')
 
   /**
@@ -55,14 +58,67 @@
   const isHead = computed((): boolean => {
     return !!(prop.height && prop.showHead)
   })
+
+  /** 格式化后的数据 */
+  const formatData = ref<TableData>([])
+
+  /** 是否选中所有 */
+  const isSelectAll = computed({
+    get: (): boolean => {
+      return (formatData.value || []).every(item => item._select)
+    },
+    set: (value: boolean): boolean => {
+      /** 改变全部的状态 */
+      const selectList: TableData = (formatData.value || []).map(item => {
+        item._select = value
+        return item
+      })
+
+      formatData.value = selectList
+
+      checkboxChange() // 执行回调方法
+      return value
+    }
+  })
+
+  /** 设置格式化后的数据方法 */
+  const setFormData = (): void => {
+    if (!isArray(prop.data)) {
+      formatData.value = []
+    }
+
+    if (prop.select) {
+      const selectData = prop.data.map(item => {
+        return {
+          ...item,
+          _select: false
+        }
+      })
+
+      formatData.value = selectData
+      return
+    }
+
+    formatData.value = prop.data
+  }
+
+  setFormData() // 设置格式化后的数据方法
+
+  /** 选择器切换触发 */
+  const checkboxChange = (): void => {
+    /** 获取到所有选中的 */
+    const activeList: TableData = (formatData.value || []).filter(item => item._select)
+
+    run(prop.onSelect, activeList)
+  }
 </script>
 
 <template>
   <div role="table" :class="classList" :style="styleList">
     <!-- 主要容器 -->
     <div class="f-table__container">
       <!-- 内置数据驱动表格 -->
-      <template v-if="columns || data">
+      <template v-if="columns || formatData">
         <!-- 在限制高度时展示的头部 -->
         <div v-if="isHead" class="f-table__header">
           <table class="f-table__table">
@@ -72,6 +128,7 @@
              -->
             <colgroup>
               <col v-if="num" />
+              <col v-if="select" />
               <col
                 v-for="(column, index) in columns"
                 :key="index"
@@ -83,6 +140,9 @@
             <thead :align="align">
               <tr>
                 <th v-if="num">#</th>
+                <th v-if="select">
+                  <f-checkbox v-model="isSelectAll" />
+                </th>
                 <th v-for="(column, index) in columns" :key="index">
                   <!-- 如果是一个函数，则调用方法 -->
                   <template v-if="isFunction(column.title)">
@@ -102,9 +162,10 @@
         <!-- 身体 -->
         <div class="f-table__body">
           <!-- 有数据 -->
-          <table v-if="data && data.length" class="f-table__table">
+          <table v-if="formatData && formatData.length" class="f-table__table">
             <colgroup>
               <col v-if="num" />
+              <col v-if="select" />
               <col
                 v-for="(column, index) in columns"
                 :key="index"
@@ -117,6 +178,9 @@
             <thead v-if="!isHead" :align="align">
               <tr>
                 <th v-if="num">#</th>
+                <th v-if="select">
+                  <f-checkbox v-model="isSelectAll" />
+                </th>
                 <th v-for="(column, index) in columns" :key="index">
                   <!-- 如果是一个函数，则调用方法 -->
                   <template v-if="isFunction(column.title)">
@@ -133,9 +197,12 @@
 
             <!-- 主要渲染内容的表体 -->
             <tbody ref="tableRef" :align="align">
-              <tr v-for="(item, m) in data" :key="m">
+              <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-for="(column, i) in columns" :key="i">

start/src/App.vue

@@ -1,5 +1,50 @@
-<script lang="ts" setup></script>
+<template>
+  <f-table :data="data" :columns="columns" select :on-select="onSelect" />
+</template>
 
-<template></template>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import type { TableSelect } from 'fighting-design'
 
-<style scoped></style>
+  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>