image.png
    arcoapi意义：

    1. dataIndex：列信息的标识，对应TableData中的数据，也就是表头。
    2. rowKey：表格行key的取值字段，相当于vue中的key绑定的信息。
    3. columns：表格的列描述信息。
    4. data：表格的数据。
    5. column-resizable：是否允许调整列宽。
    6. select：点击行选择器时触发。
    7. select-all：点击全选时触发。
    8. selected：已选择的行。
    9. selectedRowKeys：已选择的行。
    10. tooltip：是否在显示省略号时显示文字提示。
    11. render：自定义列单元格的渲染。
    12. slotName：设置当前列的渲染插槽的名字。

    笔记：

    1. $attrs号称捡漏王
      当父组件给子组件传值，子组件并没有接收数据时，此时数据在$attrs中可以拿到，并且如果子组件不需要使用数组，而孙组件需要，则可以直接v-bind=”$attrs” 传给孙。
    2. $slots是组件插槽集，是组件所有默认插槽、具名插槽的集合，可以用来获取当前组件的插槽集。
    3. 可编辑表格：可以在使用插槽获得的数据，修改data中的数据，达到编辑表格的作用，可以直接修改插槽传出的record变量。这个变量是传入的data中对应数据的引用，请保证data为Reactive类型。

    image.png

    1. <template>
    2.   <div class="main-table-wrapper">
    3.     <!--如果需要过滤表头就显示下拉框勾选显示的字段-->
    4.     <div class="editor-show-columns-btn" v-if="Props.isShowFliter">
    5.       <a-dropdown position="br">
    6.         <a-button>
    7.           <template #icon>
    8.             <icon-settings />
    9.           </template>
    10.         </a-button>
    11.         <template #content>
    12.           <a-checkbox-group direction="vertical" v-model="selectShowColumns" class="editor-show-columns-ckb">
    13.             <template v-for="item in showCheckboxColumns" :key="item.dataIndex">
    14.               <!--展示表格头的title-->
    15.               <a-checkbox v-if="item.isShowFliter !== false" :value="item.dataIndex">
    16.                 {{ item.title }}
    17.               </a-checkbox>
    18.             </template>
    19.           </a-checkbox-group>
    20.         </template>
    21.       </a-dropdown>
    22.     </div>
    23.     <!--表格体-->
    24.     <a-table
    25.       ref="TableRef"
    26.       :row-key="Props.rowKey"
    27.       :data="showData"
    28.       :columns="showColumns"
    29.       :column-resizable="true"
    30.       @select="handleSelected"
    31.       @selectAll="handleSelectedAll"
    32.       v-model:selectedKeys="selectedRowKeys"
    33.       v-bind="$attrs"
    34.     >
    35.       <!--$slots是组件插槽集，是组件所有默认插槽、具名插槽的集合，可以用来获取当前组件的插槽集。-->
    36.       <template v-for="(s, slot, index) in $slots" :key="index" #[slot]="item">
    37.         <template v-if="slot === 'customTitle'">
    38.           <div v-if="isShowCustomColumnTitle" class="custom-title">
    39.             <slot v-if="isShowCustomColumnTitle" name="customTitle" :item="item"></slot>
    40.           </div>
    41.           <span v-else>{{ customTitleName }}</span>
    42.         </template>
    43.       <!--渲染每一个插槽-->
    44.         <slot v-else :name="slot" :item="item"></slot>
    45.       </template>
    46.     </a-table>
    47.   </div>
    48. </template>
    50. <script setup lang="ts">
    51.   import { useElementSize } from '@vueuse/core'
    52.   import { computed, ref, watch } from 'vue'
    53.   import type { TableColumnData, TableData } from '@arco-design/web-vue'
    54.   import { isEmpty } from 'lodash'
    56.   const TableRef = ref(null)
    57.   const box = ref<string>('40px')
    59.   const { height } = useElementSize(TableRef)
    61.   const customTitleName = ref<string>('')
    62.   const showColumns = ref<Array<TableColumnData>>([])
    64.   const selectedKeysCache = ref<Map<string, any>>(new Map())
    66.   const Props = withDefaults(
    67.     defineProps<{
    68.       rowKey?: string
    69.       columns: Array<TableColumnData>
    70.       columnsAll?: Array<TableColumnData>
    71.       selectedRowKeys?: Array<string>
    72.       data?: Array<TableData>
    73.       isShowFliter?: boolean
    74.     }>(),
    75.     {
    76.       rowKey: 'key',
    77.       columns: () => [] as Array<TableColumnData>,
    78.       selectedRowKeys: () => [],
    79.       data: () => [],
    80.       isShowFliter: false
    81.     }
    82.   )
    83.   // 表格的表头，由父组件传的props.columns或columnsAll传递过来
    84.   const showCheckboxColumns = ref<Array<TableColumnData>>(Props.columnsAll ?? Props.columns)
    85.   // 过滤之后显示的表头
    86.   const selectShowColumns = ref<Array<string>>(showCheckboxColumns.value.map((item) => item.dataIndex) as Array<string>)
    88.   watch(
    89.     () => Props.columnsAll,
    90.     (columnsAll) => {
    91.       if (columnsAll) {
    92.         showCheckboxColumns.value = columnsAll
    93.         selectShowColumns.value = showCheckboxColumns.value.map((item) => item.dataIndex) as Array<string>
    94.       }
    95.     }
    96.   )
    98.   /**
    99.    * 表格展示数据
    100.    */
    101.   const showData = computed(() => {
    102.     return isEmpty(selectShowColumns.value) ? [] : Props.data
    103.   })
    105.   interface IEmitType {
    106.     (e: 'changeColumns', obj: { columns: Array<TableColumnData>; dataIndexs: Array<string> }): void
    107.     (e: 'update:columns', columns: Array<TableColumnData>): void
    108.     (e: 'update:selectedRowKeys', selectedRowKeys: Array<string>): void
    109.     (e: 'update:selectedRows', selectedRowKeys: Array<TableData>): void
    110.     (e: 'select', _1: Array<string>, _2: string, _3: TableData, _4: Array<TableData>): void
    111.     (e: 'selectAll', isAll: boolean): void
    112.   }
    113.   const Emits = defineEmits<IEmitType>()
    115.   const isShowCustomColumnTitle = computed(() => {
    116.     const targetSelectedRowKeys = Props?.selectedRowKeys
    117.     if (targetSelectedRowKeys) {
    118.       return targetSelectedRowKeys.length > 0
    119.     }
    120.     return false
    121.   })
    123.   /**
    124.    * 选择一行
    125.    */
    126.   const handleSelected = (_1: Array<string>, rowKey: string, _3: TableData) => {
    127.     const isExistence = selectedKeysCache.value.has(rowKey)
    128.     selectedKeysCache.value[isExistence ? 'delete' : 'set'](rowKey, _3)
    129.     Emits('update:selectedRowKeys', Array.from(selectedKeysCache.value.keys()))
    130.     Emits('update:selectedRows', Array.from(selectedKeysCache.value.values()))
    131.     Emits(
    132.       'select',
    133.       Array.from(selectedKeysCache.value.keys()),
    134.       rowKey,
    135.       _3,
    136.       Array.from(selectedKeysCache.value.values())
    137.     )
    138.   }
    140.   /**
    141.    * 维护 a-table 自身的 selectedRowKeys
    142.    */
    143.   const selectedRowKeys = ref<string[]>()
    145.   watch(
    146.     () => Props.selectedRowKeys,
    147.     (newVal) => {
    148.       selectedRowKeys.value = newVal
    149.       // selectedKeysCache.value.clear()
    150.       // newVal.map((v) =>
    151.       //   selectedKeysCache.value.set(
    152.       //     v,
    153.       //     Props.data.find((item) => item[Props.rowKey] === v)
    154.       //   )
    155.       // )
    156.     },
    157.     { immediate: true }
    158.   )
    160.   /**
    161.    * 全选
    162.    */
    163.   const handleSelectedAll = (isAll) => {
    164.     // isAll
    165.     //   ? Props.data?.forEach((item) => selectedKeysCache.value.add(item[Props.rowKey as string]))
    166.     //   : selectedKeysCache.value.clear()
    167.     if (!isAll) {
    168.       Props.data.map((item) => selectedKeysCache.value.delete(item[Props.rowKey as string]))
    169.     } else {
    170.       Props.data.map((item) => selectedKeysCache.value.set(item[Props.rowKey as string], item))
    171.     }
    172.     Emits('update:selectedRowKeys', Array.from(selectedKeysCache.value.keys()))
    173.     Emits('update:selectedRows', Array.from(selectedKeysCache.value.values()))
    174.     Emits('selectAll', isAll)
    175.   }
    177.   watch(
    178.     () => Props.columns,
    179.     (newColumns) => {
    180.       const targetIndex = newColumns.findIndex((item) => item.customTitle)
    181.       const targetColumns = [...newColumns]
    182.       customTitleName.value = (targetColumns[targetIndex]?.title ?? '') as string
    183.       targetColumns[targetIndex] = {
    184.         ...targetColumns[targetIndex],
    185.         titleSlotName: 'customTitle'
    186.       }
    187.       showColumns.value = targetColumns
    188.       if (!Props.isShowFliter) {
    189.         showCheckboxColumns.value = newColumns
    190.         selectShowColumns.value = showCheckboxColumns.value.map((item) => item.dataIndex) as Array<string>
    191.       }
    192.     },
    193.     {
    194.       immediate: true
    195.     }
    196.   )
    198.   /**
    199.    * 更新 columns
    200.    */
    201.   watch(selectShowColumns, (newSelectShowColumns) => {
    202.     const targetColumns = showCheckboxColumns.value.filter(
    203.       (item) => newSelectShowColumns.includes(item?.dataIndex ?? '') || item.isShowFliter === false
    204.     )
    205.     Emits('update:columns', targetColumns)
    206.     Emits('changeColumns', { columns: targetColumns, dataIndexs: newSelectShowColumns })
    207.   })
    209.   /**
    210.    * 列设置动态大小
    211.    */
    212.   watch(height, () => {
    213.     const TABLE_TR = document.querySelector('.main-table-wrapper thead .arco-table-tr') as HTMLElement
    214.     box.value = TABLE_TR?.offsetHeight ? TABLE_TR?.offsetHeight - 1 + 'px' : box.value
    215.   })
    217.   /**
    218.    * 暴露给外部的state
    219.    */
    220.   const clearSelectedKeysCache = () => selectedKeysCache.value.clear()
    221.   defineExpose({
    222.     clearSelectedKeysCache
    223.   })
    224. </script>
    226. <style lang="scss" scoped>
    227.   .main-table-wrapper {
    228.     position: relative;
    229.     .editor-show-columns-btn {
    230.       position: absolute;
    231.       top: 0px;
    232.       right: 0px;
    233.       z-index: 1;
    234.       display: flex;
    235.       justify-content: center;
    236.       align-items: center;
    237.       width: v-bind(box);
    238.       height: v-bind(box);
    239.       font-size: 15px;
    240.       border: 1px solid #e5e6eb;
    241.       background-color: #f2f3f5;
    242.     }
    243.     .custom-title {
    244.       display: flex;
    245.       position: absolute;
    246.       top: 4px;
    247.       min-height: 24px;
    248.       z-index: 1;
    249.       border-radius: 2px;
    250.       width: max-content;
    251.       background: #fff;
    252.       padding: 2px 4px;
    253.       box-shadow: 0 0 2px 0 rgb(31 31 31 / 5%), 0 4px 6px 0 rgb(31 31 31 / 20%);
    254.       .forbidden {
    255.         cursor: not-allowed;
    256.       }
    257.     }
    258.   }
    259.   .editor-show-columns-ckb {
    260.     margin: 0 4px;
    261.   }
    262. </style>