ProTable 高级表格 ​

<script setup lang="ts">
import { ref } from 'vue'
import { Delete2, Disable, Enable, More2, Plus2 } from '@uniboot/icons-vue'
import {
  ProTable,
  UAlert,
  UButton,
  UDropdown,
  UDropdownItem,
  UDropdownMenu,
  USpace,
} from 'uniboot-ui'

type Row = {
  id: number
  name: string
  code: string
  owner: string
  department: string
  status: number
  priority: string
  amount: number
  contactPhone: string
  email: string
  region: string
  createdAt: string
  updatedAt: string
  remark: string
  operation: string
}

const ROW_COUNT = 186

const DEPTS = ['rd', 'ops', 'mkt', 'hr'] as const
const DEPT_LABEL: Record<(typeof DEPTS)[number], string> = {
  rd: '研发',
  ops: '运营',
  mkt: '市场',
  hr: '人力',
}
const OWNERS = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
const REGIONS = ['华东', '华南', '华北', '西南'] as const
const PRIORITIES = ['高', '中', '低'] as const

const all = ref<Row[]>(
  Array.from({ length: ROW_COUNT }, (_, i) => {
    const day = (i % 28) + 1
    const month = (Math.floor(i / 28) % 12) + 1
    const dept = DEPTS[i % DEPTS.length]
    return {
      id: i + 1,
      name: `项目 ${i + 1}`,
      code: `PRJ${String(i + 1).padStart(5, '0')}`,
      owner: OWNERS[i % OWNERS.length],
      department: dept,
      status: i % 2,
      priority: PRIORITIES[i % PRIORITIES.length],
      amount: Math.round((i + 1) * 1280.5 * 100) / 100,
      contactPhone: `138${String(10000000 + i).slice(-8)}`,
      email: `user${i + 1}@example.com`,
      region: REGIONS[i % REGIONS.length],
      createdAt: `2026-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
      updatedAt: `2026-${String(month).padStart(2, '0')}-${String(Math.min(day + 3, 28)).padStart(2, '0')}`,
      remark: i % 5 === 0 ? '重点关注' : '',
      operation: '',
    }
  })
)

const columns = [
  {
    dataIndex: 'name',
    title: '名称',
    search: true,
    order: 1,
    minWidth: 120,
    tooltip: '支持名称模糊查询',
  },
  {
    dataIndex: 'code',
    title: '编号',
    search: true,
    order: 2,
    width: 110,
  },
  {
    dataIndex: 'owner',
    title: '负责人',
    search: true,
    order: 3,
    width: 100,
  },
  {
    dataIndex: 'department',
    title: '部门',
    search: true,
    order: 4,
    valueType: 'select' as const,
    width: 90,
    options: DEPTS.map((v) => ({ label: DEPT_LABEL[v], value: v })),
  },
  {
    dataIndex: 'status',
    title: '状态',
    search: true,
    order: 5,
    valueType: 'select' as const,
    width: 88,
    options: [
      { label: '启用', value: 1 },
      { label: '停用', value: 0 },
    ],
  },
  {
    dataIndex: 'priority',
    title: '优先级',
    search: true,
    order: 6,
    valueType: 'select' as const,
    width: 88,
    options: PRIORITIES.map((p) => ({ label: p, value: p })),
  },
  {
    dataIndex: 'amount',
    title: '金额（元）',
    width: 120,
    search: false,
  },
  {
    dataIndex: 'contactPhone',
    title: '联系电话',
    width: 130,
    search: false,
  },
  {
    dataIndex: 'email',
    title: '邮箱',
    minWidth: 160,
    search: false,
  },
  {
    dataIndex: 'region',
    title: '区域',
    search: true,
    order: 7,
    valueType: 'select' as const,
    width: 88,
    options: REGIONS.map((r) => ({ label: r, value: r })),
  },
  {
    dataIndex: 'createdRange',
    title: '创建区间',
    search: true,
    order: 8,
    valueType: 'daterange' as const,
    hideInTable: true,
  },
  {
    dataIndex: 'createdAt',
    title: '创建时间',
    search: true,
    order: 9,
    valueType: 'date' as const,
    width: 120,
    fixed: 'left' as const,
  },
  {
    dataIndex: 'updatedAt',
    title: '更新时间',
    width: 120,
    search: false,
  },
  {
    dataIndex: 'remark',
    title: '备注',
    minWidth: 100,
    search: false,
  },
  {
    dataIndex: 'operation',
    title: '操作',
    width: 152,
    fixed: 'right' as const,
    disableInSetting: true,
    align: 'center' as const,
    columnSlot: 'actions',
    search: false,
  },
]

const moreMenuItems = [
  { key: 'import', label: '导入数据' },
  { key: 'export', label: '导出数据' },
  { key: 'batchAssign', label: '批量分配' },
]

function onNew() {
  console.log('new')
}

function onMoreMenuClick(key: string) {
  console.log('more menu click:', key)
}

function onDisable(row: Row) {
  console.log('disable', row.id)
}

function onEnable(row: Row) {
  console.log('enable', row.id)
}

function onDelete(row: Row) {
  console.log('delete', row.id)
}

async function request({
  current,
  pageSize,
  query,
}: {
  current: number
  pageSize: number
  query: Record<string, unknown>
}) {
  let rows = [...all.value]
  const name = query.name as string | undefined
  if (name) rows = rows.filter((r) => String(r.name).includes(name))
  const code = query.code as string | undefined
  if (code) rows = rows.filter((r) => r.code.includes(code))
  const owner = query.owner as string | undefined
  if (owner) rows = rows.filter((r) => r.owner.includes(owner))
  const department = query.department as string | undefined
  if (department !== undefined && department !== '' && department != null)
    rows = rows.filter((r) => r.department === department)
  if (query.status !== undefined && query.status !== '' && query.status != null)
    rows = rows.filter((r) => r.status === Number(query.status))
  const priority = query.priority as string | undefined
  if (priority) rows = rows.filter((r) => r.priority === priority)
  const region = query.region as string | undefined
  if (region) rows = rows.filter((r) => r.region === region)
  const day = query.createdAt as string | undefined
  if (day) rows = rows.filter((r) => r.createdAt === day)
  const range = query.createdRange as unknown
  if (Array.isArray(range) && range.length === 2 && range[0] && range[1]) {
    const [start, end] = range as [string, string]
    rows = rows.filter((r) => r.createdAt >= start && r.createdAt <= end)
  }
  const start = (current - 1) * pageSize
  return {
    data: rows.slice(start, start + pageSize),
    total: rows.length,
    success: true,
  }
}
</script>

<template>
  <div class="pro-table-demo">
    <pro-table
      row-key="id"
      :search="{ defaultCollapsed: true }"
      :columns="columns"
      :request="request"
      :pagination="{
        defaultPageSize: 10,
        pageSizeOptions: [10, 20, 50, 100],
        hideOnSinglePage: false,
      }"
      :options="{
        reload: true,
        density: true,
        setting: true,
        columnDrag: true,
      }"
    >
      <template #actions>
        <u-space>
          <u-button type="primary" :icon="Plus2" @click="onNew">新增</u-button>
          <u-dropdown
            trigger="click"
            placement="bottom-end"
            @command="onMoreMenuClick"
          >
            <u-button
              icon-button
              class="pro-table-demo__more-btn"
              :icon="More2"
              title="更多"
              aria-label="更多"
            />
            <template #dropdown>
              <u-dropdown-menu>
                <u-dropdown-item
                  v-for="item in moreMenuItems"
                  :key="item.key"
                  :command="item.key"
                >
                  {{ item.label }}
                </u-dropdown-item>
              </u-dropdown-menu>
            </template>
          </u-dropdown>
        </u-space>
      </template>
      <template #tip>
        <u-alert
          type="primary"
          show-icon
          :closable="false"
          title="可选提示区：用于列表说明、告警阈值等业务提示。"
        />
      </template>
      <template #column-actions="{ row }">
        <u-space>
          <u-button
            :icon="Disable"
            tooltip="禁用"
            type="danger"
            @click="onDisable(row as Row)"
          />
          <u-button
            :icon="Enable"
            tooltip="启用"
            type="primary"
            @click="onEnable(row as Row)"
          />
          <u-button
            :icon="Delete2"
            tooltip="删除"
            type="danger"
            @click="onDelete(row as Row)"
          />
        </u-space>
      </template>
    </pro-table>
  </div>
</template>

<style scoped>
.pro-table-demo {
  box-sizing: border-box;
  width: 100%;
  min-height: 320px;
  padding: 20px;
}

.pro-table-demo :deep(.pro-table-demo__more-btn.u-button.is-icon-button) {
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: #f2f3f5;
  border-color: transparent;
  color: #4e5968;
}

.pro-table-demo
  :deep(
    .pro-table-demo__more-btn.u-button.is-icon-button:not(.is-disabled):hover
  ) {
  background-color: #e5e6eb;
  border-color: transparent;
  color: #4e5968;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { ProTable } from 'uniboot-ui'

type Row = {
  id: number
  name: string
  department: string
  status: number
  createdAt: string
}

const all = ref<Row[]>(
  Array.from({ length: 86 }, (_, i) => ({
    id: i + 1,
    name: `项目 ${i + 1}`,
    department: ['研发', '运营', '市场'][i % 3],
    status: i % 2,
    createdAt: `2026-05-${String((i % 28) + 1).padStart(2, '0')}`,
  }))
)

const columns = [
  { dataIndex: 'name', title: '名称', minWidth: 140 },
  { dataIndex: 'department', title: '部门', width: 100 },
  {
    dataIndex: 'status',
    title: '状态',
    width: 88,
    align: 'center' as const,
  },
  { dataIndex: 'createdAt', title: '创建时间', width: 120 },
]

async function request({
  current,
  pageSize,
}: {
  current: number
  pageSize: number
  query: Record<string, unknown>
}) {
  const start = (current - 1) * pageSize
  return {
    data: all.value.slice(start, start + pageSize),
    total: all.value.length,
    success: true,
  }
}
</script>

<template>
  <div class="pro-table-demo">
    <pro-table
      row-key="id"
      :search="false"
      :columns="columns"
      :request="request"
      :pagination="{ defaultPageSize: 10, pageSizeOptions: [10, 20, 50] }"
      :options="{ reload: true, density: true }"
    />
  </div>
</template>

<style scoped>
.pro-table-demo {
  box-sizing: border-box;
  width: 100%;
  min-height: 280px;
  padding: 20px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { ProTable } from 'uniboot-ui'

type Row = {
  id: number
  name: string
  owner: string
  status: number
}

const all = ref<Row[]>(
  Array.from({ length: 64 }, (_, i) => ({
    id: i + 1,
    name: `任务 ${i + 1}`,
    owner: ['张三', '李四', '王五'][i % 3],
    status: i % 2,
  }))
)

const columns = [
  { dataIndex: 'name', title: '名称', minWidth: 140 },
  { dataIndex: 'owner', title: '负责人', width: 100 },
  {
    dataIndex: 'status',
    title: '状态',
    width: 88,
    align: 'center' as const,
  },
]

async function request({
  current,
  pageSize,
}: {
  current: number
  pageSize: number
  query: Record<string, unknown>
}) {
  const start = (current - 1) * pageSize
  return {
    data: all.value.slice(start, start + pageSize),
    total: all.value.length,
    success: true,
  }
}
</script>

<template>
  <div class="pro-table-demo">
    <pro-table
      row-key="id"
      :show-toolbar="false"
      :search="false"
      :columns="columns"
      :request="request"
      :pagination="{ defaultPageSize: 10, pageSizeOptions: [10, 20, 50] }"
    />
  </div>
</template>

<style scoped>
.pro-table-demo {
  box-sizing: border-box;
  width: 100%;
  min-height: 280px;
  padding: 20px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { ProTable } from 'uniboot-ui'

type Row = {
  id: number
  merchantName: string
  merchantCode: string
  level: string
  parentMerchant: string
  merchantType: string
  settlementCycle: string
  status: string
  contactEmail: string
  reviewTime: string
  remark: string
}

const all = ref<Row[]>(
  Array.from({ length: 48 }, (_, i) => ({
    id: i + 1,
    merchantName: `商户 ${i + 1}`,
    merchantCode: `M${String(i + 1).padStart(4, '0')}`,
    level: i % 3 === 0 ? '一级' : '二级',
    parentMerchant: i % 3 === 0 ? '—' : '总部商户',
    merchantType: ['直营', '加盟', '联营'][i % 3],
    settlementCycle: ['T+1', 'T+7', '月结'][i % 3],
    status: i % 2 === 0 ? '运营中' : '已停用',
    contactEmail: `merchant${i + 1}@example.com`,
    reviewTime: `2026-0${(i % 9) + 1}-15`,
    remark: i % 4 === 0 ? '重点客户' : '',
  }))
)

const columns = [
  { dataIndex: 'merchantName', title: '商户名称', minWidth: 120 },
  { dataIndex: 'merchantCode', title: '商户标识', minWidth: 100 },
  { dataIndex: 'level', title: '层级', width: 80 },
  { dataIndex: 'parentMerchant', title: '上级商户', minWidth: 100 },
  { dataIndex: 'merchantType', title: '商户类型', width: 100 },
  { dataIndex: 'settlementCycle', title: '结算周期', width: 100 },
  { dataIndex: 'status', title: '运营状态', width: 100 },
  { dataIndex: 'contactEmail', title: '联系人邮箱', minWidth: 160 },
  { dataIndex: 'reviewTime', title: '审核时间', width: 120 },
  { dataIndex: 'remark', title: '备注', minWidth: 100 },
  {
    dataIndex: 'operation',
    title: '操作',
    width: 88,
    fixed: 'right' as const,
    disableInSetting: true,
    columnSlot: 'operation',
  },
]

async function request({
  current,
  pageSize,
}: {
  current: number
  pageSize: number
  query: Record<string, unknown>
}) {
  const start = (current - 1) * pageSize
  return {
    data: all.value.slice(start, start + pageSize),
    total: all.value.length,
    success: true,
  }
}
</script>

<template>
  <div class="pro-table-demo">
    <pro-table
      row-key="id"
      :search="false"
      :columns="columns"
      :request="request"
      :pagination="{ defaultPageSize: 10, pageSizeOptions: [10, 20, 50] }"
      :options="{ reload: false, density: false, setting: true }"
    >
      <template #column-operation>
        <a href="javascript:;">编辑</a>
      </template>
    </pro-table>
  </div>
</template>

<style scoped>
.pro-table-demo {
  box-sizing: border-box;
  width: 100%;
  min-height: 320px;
  padding: 20px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { ProTable } from 'uniboot-ui'

type Row = {
  id: number
  merchantName: string
  merchantCode: string
  merchantType: string
  settlementCycle: string
  status: string
  contactEmail: string
  reviewTime: string
}

const all = ref<Row[]>(
  Array.from({ length: 48 }, (_, i) => ({
    id: i + 1,
    merchantName: `商户 ${i + 1}`,
    merchantCode: `M${String(i + 1).padStart(4, '0')}`,
    merchantType: ['直营', '加盟', '联营'][i % 3],
    settlementCycle: ['T+1', 'T+7', '月结'][i % 3],
    status: i % 2 === 0 ? '运营中' : '已停用',
    contactEmail: `merchant${i + 1}@example.com`,
    reviewTime: `2026-0${(i % 9) + 1}-15`,
  }))
)

const columns = [
  {
    dataIndex: 'merchantName',
    title: '商户名称',
    minWidth: 120,
    tooltip: '支持模糊匹配商户名称',
  },
  { dataIndex: 'merchantCode', title: '商户标识', minWidth: 100 },
  { dataIndex: 'merchantType', title: '商户类型', width: 100 },
  { dataIndex: 'settlementCycle', title: '结算周期', width: 100 },
  { dataIndex: 'status', title: '运营状态', width: 100 },
  { dataIndex: 'contactEmail', title: '联系人邮箱', minWidth: 160 },
  { dataIndex: 'reviewTime', title: '审核时间', width: 120 },
  {
    dataIndex: 'operation',
    title: '操作',
    width: 88,
    fixed: 'right' as const,
    columnSlot: 'operation',
  },
]

async function request({
  current,
  pageSize,
}: {
  current: number
  pageSize: number
  query: Record<string, unknown>
}) {
  const start = (current - 1) * pageSize
  return {
    data: all.value.slice(start, start + pageSize),
    total: all.value.length,
    success: true,
  }
}

function onColumnsOrderChange(
  state: import('uniboot-ui').ProTableColumnSettingState
) {
  console.log(
    'columns setting:',
    state.fixed,
    state.left,
    state.center,
    state.right
  )
}
</script>

<template>
  <div class="pro-table-demo">
    <pro-table
      row-key="id"
      :search="false"
      :columns="columns"
      :request="request"
      :pagination="{ defaultPageSize: 10, pageSizeOptions: [10, 20, 50] }"
      :options="{ reload: false, density: false, columnDrag: true }"
      @columns-order-change="onColumnsOrderChange"
    >
      <template #column-operation>
        <a href="javascript:;">编辑</a>
      </template>
    </pro-table>
  </div>
</template>

<style scoped>
.pro-table-demo {
  box-sizing: border-box;
  width: 100%;
  min-height: 320px;
  padding: 20px;
}
</style>