Table 表格增强

表格单元格与工具栏增强：行内编辑 / 下拉、链接单元格、列设置。行操作直接用 RdButtonGroupMore（可加 class="table-row-actions"）。

链接单元格

<script setup lang="ts">
import { RdTableCellLink, toast } from '@rd-element/ui'
</script>

<template>
  <div class="demo-col" style="gap:10px;align-items:flex-start">
    <RdTableCellLink variant="primary" @click="toast.info('联系人', '张明')">张明</RdTableCellLink>
    <RdTableCellLink variant="muted" @click="toast.info('客户代码', 'CUS-1024')">CUS-1024</RdTableCellLink>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
variant	样式变体	'primary' | 'muted'	'primary'
block	块级占满宽度	boolean	false
showIcon	显示外链图标	boolean	true

Events

事件名	说明	类型
click	点击	(event: MouseEvent) => void

行操作

复用 RdButtonGroupMore：size="small" + class="table-row-actions"；完整 API 见 Button。

<script setup lang="ts">
import { UserCheck, Mail, Archive, Eye, FileText, Trash2 } from '@lucide/vue'
import {
  RdButtonGroupMore,
  toast,
  type RdButtonGroupMoreItem,
} from '@rd-element/ui'

const followItems: RdButtonGroupMoreItem[] = [
  { title: '发邮件', command: '发邮件', icon: Mail },
  { title: '归档', command: '归档', icon: Archive },
]

const detailItems: RdButtonGroupMoreItem[] = [
  { title: '复制链接', command: '复制链接', icon: FileText },
  { title: '删除', command: '删除', icon: Trash2, divided: true },
]
</script>

<template>
  <div class="demo-row" style="gap:14px;align-items:center;flex-wrap:wrap">
    <RdButtonGroupMore
      class="table-row-actions"
      size="small"
      title="查看"
      :icon="UserCheck"
      :children="followItems"
      @click="toast.info('查看', '跟进客户')"
      @command="(cmd) => toast.info('更多', String(cmd))"
    />
    <RdButtonGroupMore
      class="table-row-actions"
      size="small"
      title="详情"
      :icon="Eye"
      trigger="hover"
      :children="detailItems"
      @click="toast.info('查看', '报价详情')"
      @command="(cmd) => toast.info('更多', String(cmd))"
    />
    <RdButtonGroupMore
      class="table-row-actions"
      size="small"
      title="仅主操作"
      :icon="Eye"
      @click="toast.info('查看', '无更多菜单')"
    />
  </div>
</template>

行内下拉

<script setup lang="ts">
import { ref } from 'vue'
import { RdTableInlineSelect } from '@rd-element/ui'

const status = ref('Enterprise')
const options = [
  { label: '企业', value: 'Enterprise' },
  { label: '商业', value: 'Business' },
  { label: '入门', value: 'Starter' },
]
</script>

<template>
  <RdTableInlineSelect v-model="status" :options="options" aria-label="编辑等级">
    <template #display>
      <el-tag type="primary" size="small" round>企业</el-tag>
    </template>
  </RdTableInlineSelect>
</template>

Attributes

属性名	说明	类型	默认值
v-model	选中值	string | number	—
options	下拉选项	InlineSelectOption[]	—

行内编辑

与 el-table 联调：文本 / textarea / 金额列。

<script setup lang="ts">
import { ref } from 'vue'
import { RdTableInlineEdit, toast } from '@rd-element/ui'

const rows = ref([
  { id: '1', name: '张三', remark: '华东重点客户', amount: '12800' },
  { id: '2', name: '李四', remark: '待回访', amount: '5600' },
  { id: '3', name: '王五', remark: '', amount: '9200' },
])

function updateRow(id: string, field: 'name' | 'remark' | 'amount', value: string | number) {
  const row = rows.value.find((r) => r.id === id)
  if (!row) return
  row[field] = String(value)
  toast.success(
    '已保存',
    field === 'name' ? '姓名已更新' : field === 'remark' ? '备注已更新' : '金额已更新',
  )
}
</script>

<template>
  <el-table :data="rows" class="demo-inline-edit-table" style="width: 100%">
    <el-table-column label="姓名" min-width="120">
      <template #default="{ row }">
        <RdTableInlineEdit
          :model-value="row.name"
          title="编辑姓名"
          placeholder="请输入姓名"
          aria-label="编辑姓名"
          @save="(v) => updateRow(row.id, 'name', v)"
        />
      </template>
    </el-table-column>
    <el-table-column label="备注" min-width="180">
      <template #default="{ row }">
        <RdTableInlineEdit
          :model-value="row.remark"
          title="编辑备注"
          input-type="textarea"
          placeholder="选填备注"
          :width="320"
          aria-label="编辑备注"
          @save="(v) => updateRow(row.id, 'remark', v)"
        >
          <template #display>
            <span class="muted-text">{{ row.remark || '—' }}</span>
          </template>
        </RdTableInlineEdit>
      </template>
    </el-table-column>
    <el-table-column label="金额" min-width="120">
      <template #default="{ row }">
        <RdTableInlineEdit
          :model-value="row.amount"
          title="编辑金额"
          placeholder="请输入金额"
          aria-label="编辑金额"
          placement="bottom-end"
          @save="(v) => updateRow(row.id, 'amount', v)"
        >
          <template #display>
            <span class="num-cell">¥ {{ Number(row.amount).toLocaleString() }}</span>
          </template>
        </RdTableInlineEdit>
      </template>
    </el-table-column>
  </el-table>
</template>

Attributes

属性名	说明	类型	默认值
v-model	单元格值	string | number	''
title	浮层标题	string	'编辑'
inputType	输入类型	'text' | 'textarea'	'text'

Events

事件名	说明	类型
update:modelValue	值变更	(value) => void
save	保存	(value) => void
cancel	取消	() => void

分页

列表底部分页：页码、每页条数、跳转。

共 248 条，显示 1–50

每页10 条50 条100 条500 条1000 条

1 / 5

跳转至

<script setup lang="ts">
import { ref } from 'vue'
import { RdPagination } from '@rd-element/ui'

const page = ref(1)
const pageSize = ref(50)
</script>

<template>
  <RdPagination v-model:current-page="page" v-model:page-size="pageSize" :total="248" />
</template>

Attributes

属性名	说明	类型	默认值
currentPage	当前页（配合 update:currentPage）	number	—
pageSize	每页条数	number	—
total	总条数	number	—

Events

事件名	说明	类型
update:currentPage	页码变更	(page: number) => void
update:pageSize	每页条数变更	(size: number) => void

列设置

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  RdTableColumnSettings,
  type TableColumnSettingItem,
  type TableColumnSettingAction,
} from '@rd-element/ui'

const defaultItems: TableColumnSettingItem[] = [
  { key: 'name', label: '客户名称', visible: true, order: 0, fixed: true },
  { key: 'code', label: '客户编码', visible: true, order: 1 },
  { key: 'stage', label: '阶段', visible: true, order: 2 },
  { key: 'owner', label: '跟进人', visible: false, order: 3 },
]

const extraActions: TableColumnSettingAction[] = [
  { key: 'merge', label: '合并', title: '合并单元格', activeTitle: '取消合并' },
]

const columns = ref(defaultItems.map((i) => ({ ...i })))

const customized = computed(() =>
  columns.value.some(
    (item, i) =>
      item.visible !== defaultItems[i]?.visible ||
      item.tableFixed !== defaultItems[i]?.tableFixed ||
      !!item.flags?.merge !== !!defaultItems[i]?.flags?.merge,
  ),
)

function onToggle(key: string) {
  const item = columns.value.find((i) => i.key === key)
  if (!item || item.fixed) return
  item.visible = !item.visible
  if (!item.visible && item.tableFixed) delete item.tableFixed
}

function onToggleTableFixed(key: string, side: 'left' | 'right') {
  const item = columns.value.find((i) => i.key === key)
  if (!item || !item.visible) return
  if (item.tableFixed === side) delete item.tableFixed
  else item.tableFixed = side
}

function onToggleAction(columnKey: string, actionKey: string) {
  const item = columns.value.find((i) => i.key === columnKey)
  if (!item || !item.visible) return
  item.flags = { ...item.flags, [actionKey]: !item.flags?.[actionKey] }
}

function onReorder(from: number, to: number) {
  const list = [...columns.value]
  const [moved] = list.splice(from, 1)
  if (!moved) return
  list.splice(to, 0, moved)
  columns.value = list
}

function onReset() {
  columns.value = defaultItems.map((i) => ({ ...i }))
}
</script>

<template>
  <RdTableColumnSettings
    :items="columns"
    :customized="customized"
    show-pin-right
    :extra-actions="extraActions"
    hint="勾选显示列，可固定左右、合并，拖拽调整顺序"
    @toggle="onToggle"
    @toggle-table-fixed="onToggleTableFixed"
    @toggle-action="onToggleAction"
    @reorder="onReorder"
    @reset="onReset"
  />
</template>

Attributes

属性名	说明	类型	默认值
items	列配置项（visible / fixed 锁定 / tableFixed 表格固定 / flags 自定义动作）	TableColumnSettingItem[]	—
customized	是否已定制	boolean	—
showPinLeft	是否展示「固定左侧」	boolean	true
showPinRight	是否展示「固定右侧」	boolean	false
extraActions	追加的自定义动作列（与固定左/右同款开关）	TableColumnSettingAction[]	[]
hint	覆盖面板提示文案	string	—

Events

事件名	说明	类型
toggle	显示切换	(key: string) => void
toggleTableFixed	切换表格列固定（左/右互斥）	(key: string, side: 'left' | 'right') => void
toggleAction	切换自定义动作开关	(columnKey: string, actionKey: string) => void
reorder	拖拽排序	(from, to) => void
reset	恢复默认	() => void

Slots

插槽名	说明
append	列设置触发按钮右侧的扩展内容（自定义按钮等）