arco-design表格二次封装，支持表头配置和表格导出，并增加插槽支持扩展

最新推荐文章于 2025-06-23 14:03:39 发布

原创

最新推荐文章于 2025-06-23 14:03:39 发布 · 860 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

<script lang="ts" name="SdataTable" setup>
import { computed, reactive, useAttrs, useSlots, watch } from 'vue'
import type { StyleValue } from 'vue'
import { getDistance, rem2pxAsNumber, useXlsx } from '@/utils/service'
import type { PaginationProps, TableColumnData } from '@arco-design/web-vue'
import type { SdataTableTool, SdataTableTools } from './types'
import {cloneDeep, isNumber} from 'lodash'

const props = withDefaults(
  defineProps<{
    // 表格样式
    tableStyle?: StyleValue
    // 数据
    data: any[]
    // 表格列
    columns: TableColumnData[]
    // 固定表头
    fixedTableHeader?: boolean
    // 表格列固定
    fixedTable?: boolean | number
    // 分页
    pagination?: boolean | PaginationProps
    // 是否自动分页
    autoPagination?: boolean
    // 宽度
    width?: number
    // 工具箱
    tools?: SdataTableTools
    // 显示列索引
    visibleColumnIndexs?: number[]
    // 导出文件名称
    exportFileName?: string
  }>(),
  {
    pagination: false,
    autoPagination: true,
    fixedTableHeader: true,
    fixedTable: false,
    tools: () => ({
      setting: false,
      export: false
    }),
    visibleColumnIndexs: () => []
  }
)
const emit = defineEmits<{
  (event: 'search', query: any): void
  (event: 'pageChange', page: number): void
  (event: 'pageSizeChange', pageSize: number): void
  (event: 'settingChange', activeIndexs: number[]): void
}>()
const attrs = useAttrs()
const slots = useSlots()
// 获取表格容器样式
const getTableContainerStyle = computed(() => {
  const result = props.tableStyle || {}
  props.width &