vue3 + antd二次封装a-table组件

最新推荐文章于 2026-04-15 17:25:36 发布

原创

最新推荐文章于 2026-04-15 17:25:36 发布 · 3.4k 阅读

前置条件

vue版本 v3.3.11
ant-design-vue版本 v4.1.1

内容梗概

二次封装a-table组件，大大提高工作效率和降低项目维护成本；

先看效果图

在这里插入图片描述

代码区域

utils.js文件

// 用于模拟接口请求
export const getRemoteTableData = (data = [], time = 1000) => {
   
   
    return new Promise((resolve) => {
   
   
        setTimeout(() => {
   
   
            const retObj = {
   
   
                list: data,
                total: 100,
                pageSize: 10,
                pageNum: 1,
            }
            resolve(retObj)
        }, time)
    })
}

// 指定范围随机数
export const getRandomNumber = (min, max) => {
   
   
    return Math.floor(Math.random() * (max - min + 1) + min);
}

// 判断空值
export const isEmpty = (value) => {
   
   
    if (Array.isArray(value)) {
   
   
        return !value.length
    } else if (Object.prototype.toString.call(value) === "[object Object]") {
   
   
        return !Object.keys(value).length
    } else {
   
   
        return [null, undefined, ''].includes(value)
    }
}

//  数字格式化
export const formatNumber = (num) =>
    num ? (num + "").replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,") : (isEmpty(num) ? '' : 0)

// 百分比格式化
export const formatPercent = (percent, n = 2) => isEmpty(percent) ? '' : `${
     
     (+percent).toFixed(n)}%`

// 金额格式化
export const formatMoney = (num) => isEmpty(num) ? "" : formatNumber(num.toFixed(2))

my-table.vue组件

<template>
  <div>
    <div class="attach-buttons-wrap">
      <a-button
        style="margin-right: 10px"
        v-bind="btn.props"
        @click="btn.onclick({ selectedRowKeys })"
        v-for="btn in attachButtons"
        :key="btn.name"
        :disabled="
          typeof btn?.props?.disabled === 'function'
            ? btn?.props?.disabled(selectedRowKeys)
            : btn?.props?.disabled ?? false
        "
        >{
  
  { btn.name }}</a-button
      >
    </div>
    <a-table
      v-bind="{
        loading: localLoading,
        pagination: localPagination,
        rowSelection: localRowSelection,
        rowKey: 'id',
        ...$attrs,
      }"
      :dataSource="dataSource"
    >
      <!-- 自定义渲染单元格 -->
      <template #bodyCell="{ text, record, index, column }">
        <!-- 操作列 -->
        <template v-if="column.dataIndex === 'operation'">
          <a
            v-for="(item, itemIndex) in column.buttons"
            :key="itemIndex