表格 Table

默认对应 Arco 无边框表格，border 对应带单元格边框表格。 属性用法见 Element Plus 文档。

基础与边框

切换边框、表头和自适应宽度；点击行可查看 Arco 没有对应项的当前行高亮。

Border

Header

Fit

<script setup lang="ts">
import { ref } from 'vue'
const border = ref(false)
const header = ref(true)
const fit = ref(true)
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
</script>

<template>
  <div style="width: 100%">
    <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px">
      <el-switch v-model="border" active-text="Border" />
      <el-switch v-model="header" active-text="Header" />
      <el-switch v-model="fit" active-text="Fit" />
    </div>
    <el-table :data="rows" :border="border" :show-header="header" :fit="fit" highlight-current-row>
      <el-table-column prop="name" label="Name" width="160" />
      <el-table-column prop="age" label="Age" width="100" />
      <el-table-column prop="city" label="City" show-overflow-tooltip />
    </el-table>
  </div>
</template>

斑马纹、尺寸与合计

切换 size 查看尺寸级差，斑马纹与合计行对应 Arco 的同类场景。

SmallDefaultLarge

<script setup lang="ts">
import { ref } from 'vue'
const size = ref<'small' | 'default' | 'large'>('default')
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
</script>

<template>
  <div style="width: 100%">
    <el-radio-group v-model="size" style="margin-bottom: 16px">
      <el-radio-button value="small">Small</el-radio-button>
      <el-radio-button value="default">Default</el-radio-button>
      <el-radio-button value="large">Large</el-radio-button>
    </el-radio-group>
    <el-table :data="rows" :size="size" stripe show-summary sum-text="Total">
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount" label="Amount" />
    </el-table>
  </div>
</template>

排序、筛选与多选

点击列标题排序、筛选图标过滤城市，复选框支持多选。

<script setup lang="ts">
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
const filters = [{ text: 'London', value: 'London' }, { text: 'Paris', value: 'Paris' }]
// Keep only the rows whose city matches the selected filter.
function filterCity(value: string, row: (typeof rows)[number]) {
  return row.city === value
}
</script>

<template>
  <el-table :data="rows" :default-sort="{ prop: 'age', order: 'ascending' }" style="width: 100%">
    <el-table-column type="selection" width="40" />
    <el-table-column prop="name" label="Name" sortable />
    <el-table-column prop="age" label="Age" sortable width="100" />
    <el-table-column prop="city" label="City" :filters="filters" :filter-method="filterCity" />
  </el-table>
</template>

固定列与多级表头

横向滚动查看固定列，多级表头保留 Element Plus 的边框布局。

<script setup lang="ts">
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
</script>

<template>
  <el-table :data="rows" style="width: 100%">
    <el-table-column prop="name" label="Name" fixed width="160" />
    <el-table-column label="Details">
      <el-table-column prop="age" label="Age" width="180" />
      <el-table-column prop="city" label="City" width="220" />
      <el-table-column prop="amount" label="Amount" width="180" />
    </el-table-column>
    <el-table-column label="Actions" fixed="right" width="110"><template #default><el-button link type="primary">Edit</el-button></template></el-table-column>
  </el-table>
</template>

与 Arco 的差异

• 筛选、展开图标使用 Element Plus 图标；空数据默认只显示文字，可用 #empty 放入 el-empty。
• 勾选与展开列默认宽 48px，需要 Arco 的宽度时显式传 width="40"。
• 多级表头保留 Element Plus 的强制边框；排序整列底色只适用于单层表头且没有合并单元格的表格。
• highlight-current-row、cell-style、row-class-name、show-header、fit、show-overflow-tooltip 保留 Element Plus 配置语义，Arco 没有完全对应项。
• large 尺寸按 Element Plus 级差延伸。