更新记录

1.0.0（2025-09-02） 下载此版本

1.0.0

平台兼容性

uni-app(4.66)

uni-app x(4.66)

表格组件使用实例

介绍

自定义列及宽度样式对齐方式、开放插槽自定义数据和样式，只测试了h5和APP

详细使用案例

<template>
  <view class="table-demo">
    <!-- UniversalTable 核心使用 -->
    <universal-table
      :columns="tableColumns"
      :data="tableData"
      :loading="isLoading"
      :stripe="true"
      :hover="true"
      :show-action="true"
      action-column-width="200px"
    >

      <template #header-status="scope">
        <view class="custom-header">
          <text class="header-tag">[状态]</text>
          <text class="header-title">{{ scope.column.title }}</text>
        </view>
      </template>

      <!-- 2. 自定义单元格："操作人"列显示文字头像+姓名 -->
      <template #cell-operator="scope">
        <view class="operator-cell">
          <view 
            class="operator-avatar" 
            :style="{ backgroundColor: getAvatarColor(scope.row.operator) }"
          >
            <text class="avatar-text">{{ scope.row.operator[0] }}</text>
          </view>
          <text class="operator-name">{{ scope.row.operator }}</text>
        </view>
      </template>

      <!-- 3. 自定义单元格："金额"列添加货币符号+千分位格式化 -->
      <template #cell-amount="scope">
        <view class="amount-cell">
          <text class="amount-sign">¥</text>
          <text class="amount-value">{{ formatNumber(scope.row.amount) }}</text>
        </view>
      </template>

      <!-- 4. 操作列：编辑/删除功能 -->
      <template #action="scope">
        <view class="action-group">
          <button class="action-btn edit-btn" @click="handleEdit(scope.row)">编辑</button>
          <button class="action-btn delete-btn" @click="handleDelete(scope.row, scope.index)">删除</button>
        </view>
      </template>

      <!-- 5. 自定义空数据提示 -->
      <template #empty>
        <view class="empty-tip">
          <text class="empty-icon">📦</text>
          <text class="empty-text">暂无数据，点击下方按钮加载</text>
        </view>
      </template>
    </universal-table>

    <!-- 简单控制按钮 -->
    <view class="demo-controls">
      <button class="control-btn primary-btn" @click="loadTableData">加载表格数据</button>
      <button class="control-btn cancel-btn" @click="clearTableData">清空数据</button>
    </view>
  </view>
</template>

<script>
// 仅引入表格组件（路径需根据项目实际调整）
import UniversalTable from '@/components/xiaohong-UniversalTa/UniversalTable.vue'

export default {
  components: {
    UniversalTable // 仅注册表格组件，无其他依赖
  },
  data() {
    return {
      // 表格加载状态
      isLoading: false,
      // 表格列配置（field对应数据字段，title为表头文字）
      tableColumns: [
        {
          field: 'orderNo',
          title: '订单编号',
          width: '160px',
          align: 'left'
        },
        {
          field: 'orderName',
          title: '订单名称',
          minWidth: '220px',
          align: 'left'
        },
        {
          field: 'amount',
          title: '订单金额',
          width: '140px',
          align: 'right'
        },
        {
          field: 'status',
          title: '订单状态',
          width: '120px',
          align: 'center',

        },
        {
          field: 'createTime',
          title: '创建时间',
          width: '180px',
          align: 'center'
        },
        {
          field: 'operator',
          title: '操作人',
          width: '140px',
          align: 'center'
        }
      ],
      // 表格数据（初始为空）
      tableData: []
    }
  },
  methods: {
    /**
     * 加载表格数据（模拟接口请求）
     */
    loadTableData() {
      this.isLoading = true
      // 模拟接口延迟1.2秒，实际项目替换为真实接口调用
      setTimeout(() => {
        this.tableData = this.generateMockData(6)
        this.isLoading = false
        // 基础提示（无图标依赖，使用原生提示）
        uni.showToast({ title: '数据加载成功', icon: 'none' })
      }, 1200)
    },

    /**
     * 清空表格数据
     */
    clearTableData() {
      this.tableData = []
      uni.showToast({ title: '数据已清空', icon: 'none' })
    },

    /**
     * 生成模拟数据（模拟接口返回格式）
     * @param {Number} count - 数据条数
     * @returns {Array} 表格数据数组
     */
    generateMockData(count) {
      const statusList = ['已支付', '已支付', '未支付', '已完成']
      const operators = ['张三', '李四', '王五', '赵六', '孙七']
      const orderNames = [
        '2024Q2产品采购订单', '客户A服务合同', '办公设备采购单',
        '营销活动物料订单', '研发软件授权', '员工福利采购'
      ]

      return Array.from({ length: count }, (_, i) => ({
        orderNo: `ORD-2024-${String(i + 1).padStart(4, '0')}`, // 订单编号（格式统一）
        orderName: orderNames[i], // 订单名称
        amount: Math.floor(Math.random() * 9000) + 1000, // 1000-10000随机金额
        status: statusList[Math.floor(Math.random() * statusList.length)], // 随机状态
        createTime: this.formatDate(new Date(Date.now() - Math.random() * 15 * 24 * 60 * 60 * 1000)), // 15天内随机时间
        operator: operators[Math.floor(Math.random() * operators.length)], // 随机操作人
        id: i + 1 // 唯一标识（用于操作列）
      }))
    },

    /**
     * 日期格式化：YYYY-MM-DD HH:MM（通用工具方法）
     */
    formatDate(date) {
      const pad = (num) => String(num).padStart(2, '0') // 补零工具
      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
    },

    /**
     * 数字格式化：千分位+保留2位小数（金额专用）
     */
    formatNumber(num) {
      return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') // 千分位分隔
    },

    /**
     * 根据姓名生成头像背景色（保证同一人颜色一致，无图标依赖）
     */
    getAvatarColor(name) {
      const colors = ['#409eff', '#67c23a', '#ff9900', '#f53f3f', '#722ed1'] // 预设配色
      return colors[name.charCodeAt(0) % colors.length] // 根据姓名首字符取色
    },

    /**
     * 操作列：编辑事件（基础交互）
     */
    handleEdit(row) {
      uni.showModal({
        title: '编辑订单',
        content: `订单编号：${row.orderNo}\n订单名称：${row.orderName}`,
        showCancel: false // 仅确认按钮
      })
    },

    /**
     * 操作列：删除事件（带确认逻辑）
     */
    handleDelete(row, index) {
      uni.showModal({
        title: '确认删除',
        content: `确定删除订单「${row.orderNo}」吗？删除后不可恢复`,
        success: (res) => {
          if (res.confirm) {
            this.tableData.splice(index, 1) // 从数据数组中删除当前行
            uni.showToast({ title: '删除成功', icon: 'none' })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
/* Demo容器基础样式 */
.table-demo {
  padding: 20px;
  background-color: #fafafa;
  min-height: 300px;
}

/* 自定义表头样式（无图标，用文字标识） */
.custom-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-tag {
  font-size: 12px;
  color: #409eff;
  font-weight: 600;
}
.header-title {
  font-weight: 500;
  color: #333;
}

/* 操作人单元格样式（文字头像） */
.operator-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.operator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-text {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.operator-name {
  font-size: 14px;
  color: #333;
}

/* 金额单元格样式（货币符号+千分位） */
.amount-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.amount-sign {
  color: #666;
  font-size: 12px;
}
.amount-value {
  color: #f53f3f;
  font-weight: 500;
  font-size: 14px;
}

/* 操作列按钮组样式 */
.action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 4px 0;
}
.action-btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  border: none;
  cursor: pointer;
}
.edit-btn {
  background-color: #409eff;
  color: #fff;
}
.delete-btn {
  background-color: #f53f3f;
  color: #fff;
}

/* 空数据提示样式（用emoji替代图标） */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 0;
}
.empty-icon {
  font-size: 32px;
}
.empty-text {
  font-size: 14px;
  color: #999;
  text-align: center;
}

/* 控制按钮样式 */
.demo-controls {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.control-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.primary-btn {
  background-color: #409eff;
  color: #fff;
}
.cancel-btn {
  background-color: #f5f7fa;
  color: #666;
}
</style>