Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础表格

基础的表格展示用法。

当 w-table 元素中注入 data 对象数组后，在 w-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。可以使用 width 属性来定义列宽。当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，这样就可以自定义每一行的样式了。

vue

<template>
  <div class="flex gap-4 items-center mb-4">
    <w-switch
      v-model="hover"
      inline-prompt
      active-text="悬浮显示行背景色"
      inactive-text="悬浮不显示行背景色"
    />
    <w-radio-group v-model="size">
      <w-radio value="extra-large">超大(40px)</w-radio>
      <w-radio value="large">大(36px)</w-radio>
      <w-radio value="default">默认(32px)</w-radio>
      <w-radio value="small">小(28px)</w-radio>
      <w-radio value="mini">超小(20px)</w-radio>
    </w-radio-group>
  </div>
  <w-table
    :hover="hover"
    :size="size"
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <w-table-column
      width="120"
      prop="name"
      label="药品名称"
      show-overflow-tooltip
    />
    <w-table-column width="180" prop="size" label="规格" />
    <w-table-column width="180" prop="unit" label="单位" />
    <w-table-column prop="count" label="数量" />
    <w-table-column prop="price" label="单价(元)" align="right" />
  </w-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = [
  {
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
    status: true,
    date: '2024-04-18 12:00',
  },
  {
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
    status: false,
    date: '2024-04-18 12:00',
  },
  {
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
    status: true,
    date: '2024-04-18 12:00',
  },
  {
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
    status: false,
    date: '2024-04-18 12:00',
  },
  {
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
    status: true,
    date: '2024-04-18 12:00',
  },
]

interface User {
  date: string
  name: string
  address: string
}

const hover = ref(true)

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 3) {
    return 'disabled-row'
  }
  return ''
}

const size = ref('default')
</script>

<style>
.w3-table .disabled-row {
  --w3-table-tr-bg-color: var(--w3-color-info-plain);
}
</style>

固定列和表头

当您有大量数据块放入表中，您可以同时固定表头和列。

只要在 w-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。固定列需要使用 fixed 属性，它接受 Boolean 值。如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。

悬浮显示行背景色

vue

<template>
  <div class="flex gap-4 items-center mb-4">
    <w-switch
      v-model="hover"
      inline-prompt
      active-text="悬浮显示行背景色"
      inactive-text="悬浮不显示行背景色"
    />
  </div>
  <w-table
    :hover="hover"
    :data="tableData"
    style="width: 100%"
    height="200"
    :h-scrollbar-size="12"
    :scrollbar-size="12"
  >
    <w-table-column fixed prop="date" label="Date" width="150" />
    <w-table-column prop="name" label="Name" width="120" />
    <w-table-column prop="state" label="State" width="120" />
    <w-table-column prop="city" label="City" width="320" />
    <w-table-column prop="address" label="Address" width="600" />
    <w-table-column prop="zip" fixed="right" label="Zip" width="120" />
  </w-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const hover = ref(true)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
]
</script>

流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。

通过设置 max-height 属性为 w-table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要将 w-table-column 放置于 w-table-column 中，你可以实现组头。

单选

选择单行数据时使用色块表示。

Table 组件提供了单选的支持，只需要配置 highlight-current-row 属性即可实现单选。之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow。如果需要显示索引，可以增加一列 w-table-column，设置 type 属性为 index 即可显示从 1 开始的索引号。

🎉 多选

快捷选中多行数据：按住鼠标拖动即可选择多行。

toggleRowSelection 支持第三个参数 ignoreSelectable 以确定是否忽略可选属性。

实现多选非常简单: 手动添加一个 w-table-column，设 type 属性为 selection 即可；

vue

<template>
  <w-table
    ref="multipleTableRef"
    :data="tableData"
    row-key="id"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <w-table-column type="selection" width="50" :selectable="selectable" />
    <w-table-column width="200" prop="name" label="药品名称" />
    <w-table-column prop="size" label="规格" />
    <w-table-column prop="count" label="数量" />
    <w-table-column prop="price" label="单价(元)" align="right" />
    <w-table-column prop="total" label="金额(元)" align="right" />
  </w-table>
  <div style="margin-top: 20px">
    <w-button @click="toggleSelection([tableData[1], tableData[2]])">
      选中 1、2 行
    </w-button>
    <w-button @click="toggleSelection([tableData[1], tableData[2]], false)">
      取消选中 1、2 行
    </w-button>
    <w-button @click="toggleSelection()">取消选中所有行</w-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableInstance } from 'win-design-next'

interface User {
  id: number
  name: string
  size: string
  count: string
  unit: string
  price: string
  total: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![3].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    id: 3,
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
  },
  {
    id: 4,
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
  },
  {
    id: 5,
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
  },
  {
    id: 6,
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
  },
  {
    id: 7,
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
  },
  {
    id: 8,
    name: '注射用盐酸多巴胺',
    size: '20毫升/支',
    count: '6',
    unit: '支',
    price: '49.80',
    total: '298.80',
  },
]
</script>

排序

对表格进行排序，可快速查找或对比数据。

在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了 formatter 属性，它用于格式化指定列的值，接受一个 Function，会传入两个参数：row 和 column，可以根据自己的需求进行处理。

筛选

对表格进行筛选，可快速查找到自己想看的数据。

在列中设置 filters 和 filter-method 属性即可开启该列的筛选， filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。

vue

<template>
  <w-button @click="resetDateFilter">清除 date filter</w-button>
  <w-button @click="clearFilter">清除全部 filters</w-button>
  <w-table
    ref="tableRef"
    class="mt-4"
    row-key="date"
    :data="tableData"
    style="width: 100%"
  >
    <w-table-column
      prop="date"
      label="Date"
      sortable
      width="180"
      column-key="date"
      :filters="[
        { text: '2016-05-01', value: '2016-05-01' },
        { text: '2016-05-02', value: '2016-05-02' },
        { text: '2016-05-03', value: '2016-05-03' },
        { text: '2016-05-04', value: '2016-05-04' },
      ]"
      :filter-method="filterHandler"
    />
    <w-table-column prop="name" label="Name" width="180" />
    <w-table-column prop="address" label="Address" :formatter="formatter" />

    <w-table-column
      prop="tag"
      label="Tag"
      width="100"
      :filters="[
        { text: 'Home', value: 'Home' },
        { text: 'Office', value: 'Office' },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <w-tag
          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
          disable-transitions
          >{{ scope.row.tag }}</w-tag
        >
      </template>
    </w-table-column>
  </w-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TableColumnCtx, TableInstance } from 'win-design-next'

interface User {
  date: string
  name: string
  address: string
  tag: string
}

const tableRef = ref<TableInstance>()

const resetDateFilter = () => {
  tableRef.value!.clearFilter(['date'])
}
const clearFilter = () => {
  tableRef.value!.clearFilter()
}
const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address
}
const filterTag = (value: string, row: User) => {
  return row.tag === value
}
const filterHandler = (
  value: string,
  row: User,
  column: TableColumnCtx<User>
) => {
  const property = column['property']
  return row[property] === value
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
]
</script>

自定义列模板

自定义列的显示内容，可组合其他组件使用。

通过 slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

vue

<template>
  <w-table :data="tableData" style="width: 100%">
    <w-table-column label="Date" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <w-icon><Time /></w-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </w-table-column>
    <w-table-column label="Name" width="180">
      <template #default="scope">
        <w-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <w-tag>{{ scope.row.name }}</w-tag>
          </template>
        </w-popover>
      </template>
    </w-table-column>
    <w-table-column label="Operations">
      <template #default="scope">
        <w-button
          text
          type="primary"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
        >
          编辑
        </w-button>
        <w-button
          text
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </w-button>
      </template>
    </w-table-column>
  </w-table>
</template>

<script lang="ts" setup>
import { Time } from '@win-design-next/icons-vue'

interface User {
  date: string
  name: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

自定义表头

表头支持自定义。

通过设置 slot 来自定义表头。

展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

通过设置 type="expand" 和 slot 可以开启展开行功能， w-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 slot 相同。

switch parent border:

switch child border:

vue

<template>
  switch parent border: <w-switch v-model="parentBorder" /> switch child border:
  <w-switch v-model="childBorder" />
  <w-table
    class="mt-4"
    :data="tableData"
    :border="parentBorder"
    style="width: 100%"
  >
    <w-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          <h3>Family</h3>
          <w-table :data="props.row.family" :border="childBorder">
            <w-table-column label="Name" prop="name" />
            <w-table-column label="State" prop="state" />
            <w-table-column label="City" prop="city" />
            <w-table-column label="Address" prop="address" />
            <w-table-column label="Zip" prop="zip" />
          </w-table>
        </div>
      </template>
    </w-table-column>
    <w-table-column label="Date" prop="date" />
    <w-table-column label="Name" prop="name" />
  </w-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const parentBorder = ref(true)
const childBorder = ref(true)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
]
</script>

树形数据与懒加载

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染嵌套数据需要 prop 的 row-key。此外，子行数据可以异步加载。设置 Table 的lazy属性为 true 与加载函数 load 。通过指定 row 中的hasChildren字段来指定哪些行是包含子节点。 children 与hasChildren都可以通过 tree-props 配置。

vue

<template>
  <div>
    <w-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <w-table-column prop="date" label="Date" sortable />
      <w-table-column prop="name" label="Name" sortable />
      <w-table-column prop="address" label="Address" sortable />
    </w-table>

    <w-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <w-table-column prop="date" label="Date" />
      <w-table-column prop="name" label="Name" />
      <w-table-column prop="address" label="Address" />
    </w-table>
  </div>
</template>

<script lang="ts" setup>
interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const load = (
  row: User,
  treeNode: unknown,
  resolve: (data: User[]) => void
) => {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])
  }, 1000)
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const tableData1: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

可选择的树形数据

当 treeProps.checkStrictly 为 true，父节点和子节点的选择状态不再关联，也就是说，当选择父节点时，它的子节点将不被选择；当 treeProps.checkStrictly 是 false，父节点和子节点的选择状态将与子节点的选择状态相关联，也就是说，当选择父节点时，将选择其所有子节点。

truefalse

表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。

将 show-summary 设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，可以是一个 VNode 或 String，具体可以参考本例中的第二个表格。

vue

<template>
  <w-table :data="tableData" border show-summary style="width: 100%">
    <w-table-column prop="id" label="ID" width="180" />
    <w-table-column prop="name" label="Name" />
    <w-table-column prop="amount1" sortable label="Amount 1" />
    <w-table-column prop="amount2" sortable label="Amount 2" />
    <w-table-column prop="amount3" sortable label="Amount 3" />
  </w-table>

  <w-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px"
  >
    <w-table-column prop="id" label="ID" width="180" />
    <w-table-column prop="name" label="Name" />
    <w-table-column prop="amount1" label="Cost 1 ($)" />
    <w-table-column prop="amount2" label="Cost 2 ($)" />
    <w-table-column prop="amount3" label="Cost 3 ($)" />
  </w-table>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import type { VNode } from 'vue'
import type { TableColumnCtx } from 'win-design-next'

interface Product {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
        'Total Cost',
      ])
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}

const tableData: Product[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
]
</script>

合并行或列

多行或多列共用一个数据时，可以合并行或列。

通过给 table 传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。

vue

<template>
  <div>
    <w-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <w-table-column prop="id" label="ID" width="180" />
      <w-table-column prop="name" label="Name" />
      <w-table-column prop="amount1" sortable label="Amount 1" />
      <w-table-column prop="amount2" sortable label="Amount 2" />
      <w-table-column prop="amount3" sortable label="Amount 3" />
    </w-table>

    <w-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <w-table-column prop="id" label="ID" width="180" />
      <w-table-column prop="name" label="Name" />
      <w-table-column prop="amount1" label="Amount 1" />
      <w-table-column prop="amount2" label="Amount 2" />
      <w-table-column prop="amount3" label="Amount 3" />
    </w-table>
  </div>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'win-design-next'

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const tableData: User[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
]
</script>

自定义索引

自定义 type=index 列的行号。

通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

表格布局

通过属性 table-layout 可以指定表格中单元格、行和列的布局方式

fixedauto

您可以使用 tooltip-formatter 自定义 Tooltip 提示内容。

vue

<template>
  <w-table
    :data="tableData"
    show-overflow-tooltip
    :tooltip-formatter="tableRowFormatter"
    style="width: 100%"
  >
    <w-table-column
      prop="address"
      label="extends table formatter"
      width="240"
    />
    <w-table-column
      prop="tags"
      label="formatter object"
      width="240"
      :tooltip-formatter="({ row }) => row.tags.join(', ')"
    >
      <template #default="{ row }">
        <w-tag
          v-for="tag in row.tags"
          :key="tag"
          class="tag-item"
          type="primary"
        >
          {{ tag }}
        </w-tag>
      </template>
    </w-table-column>
    <w-table-column
      prop="url"
      label="with vnode"
      width="240"
      :tooltip-formatter="withVNode"
    />
  </w-table>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { type TableTooltipData, WLink } from 'win-design-next'

type TableData = {
  address: string
  tags: string[]
  url: string
}

const tableData: TableData[] = [
  {
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
    tags: ['Office', 'Home', 'Park', 'Garden'],
    url: 'http://wued.winning-health.com.cn:8088/win-design/',
  },
  {
    address: '760 A Street, South Frankfield, Illinois',
    tags: ['error', 'warning', 'success', 'info'],
    url: 'http://wued.winning-health.com.cn:8088/win-design/',
  },
  {
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
    tags: ['one', 'two', 'three', 'four', 'five'],
    url: 'http://wued.winning-health.com.cn:8088/win-design/',
  },
  {
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
    tags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],
    url: 'http://wued.winning-health.com.cn:8088/win-design/',
  },
]

const tableRowFormatter = (data: TableTooltipData<TableData>) => {
  return `${data.cellValue}: table formatter`
}

const withVNode = (data: TableTooltipData<TableData>) => {
  return h(WLink, { type: 'primary', href: data.cellValue }, () =>
    h('span', null, data.cellValue)
  )
}
</script>

<style scoped>
p {
  margin: 10px;
  padding: 0;
}
.tag-item + .tag-item {
  margin-left: 5px;
}
</style>

Table API

Table 属性

属性名	说明	类型	Default
data	表数据	`array`	[]
height	table 的高度。默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	`string` / `number`	—
max-height	table 的最大高度。合法的值为数字或者单位为 px 的高度。	`string` / `number`	—
stripe	是否为斑马纹 table	`boolean`	false
border	是否带有纵向边框	`boolean`	true
size 1.0.7	Table 的尺寸	`enum`	default
fit	列的宽度是否自撑开	`boolean`	true
show-header	是否显示表头	`boolean`	true
highlight-current-row	是否要高亮当前行	`boolean`	false
current-row-key	当前行的 key，只写属性	`string` / `number`	—
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	`Function` / `string`	—
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	`Function` / `object`	—
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	`Function` / `string`	—
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	`Function` / `object`	—
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。	`Function` / `string`	—
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	`Function` / `object`	—
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	`Function` / `string`	—
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	`Function` / `object`	—
row-key	行数据的 Key，用来优化 Table 的渲染；在使用`reserve-selection`功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。	`function` / `string`	—
empty-text	空数据时显示的文本内容，也可以通过 `#empty` 设置	`string`	No Data
default-expand-all	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	`boolean`	false
expand-row-keys	可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。	`array`	—
default-sort	默认的排序列的 prop 和顺序。它的 `prop` 属性指定默认的排序的列，`order` 指定默认排序的顺序	`object`	如果设置了`prop`，但没有设置 `order`，那么 `order`将被默认设置为 ascending
tooltip-effect	溢出的 tooltip 的 `effect`	`enum`	dark
tooltip-options	溢出 tooltip 的选项，参见下述 tooltip 组件	`object`	`object`
append-filter-panel-to	挂载到哪个 DOM 元素	`string`	—
show-summary	是否在表尾显示合计行	`boolean`	false
sum-text	显示摘要行第一列的文本	`string`	Sum
summary-method	自定义的合计计算方法	`Function`	—
span-method	合并行或列的计算方法	`Function`	—
select-on-indeterminate	在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行	`boolean`	true
indent	展示树形数据时，树节点的缩进	`number`	16
lazy	是否懒加载子节点数据	`boolean`	false
load	加载子节点数据的函数，`lazy` 为 true 时生效	`Function`	—
tree-props	渲染嵌套数据的配置选项	`object`	`object`
table-layout	设置表格单元、行和列的布局方式	`enum`	fixed
scrollbar-always-on	总是显示滚动条	`boolean`	false
show-overflow-tooltip	是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示，详请参考tooltip-options	`boolean` / `object`	—
flexible	确保主轴的最小尺寸，以便不超过内容	`boolean`	false
scrollbar-tabindex	body 的滚动条的包裹容器 tabindex	`string` / `number`	—
allow-drag-last-column	是否允许拖动最后一列	`boolean`	true
tooltip-formatter	自定义 `show-overflow-tooltip` 时的 tooltip 内容	`Function`	—
h-scrollbar-size	配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。	`number`	10
scrollbar-size	配置表格的垂直滚动条大小，防止水平和垂直滚动条重叠。	`number`	10
hover 1.1.9	是否开启鼠标悬停高亮	`boolean`	true

Table 事件

事件名	说明	类型
select	当用户手动勾选数据行的 Checkbox 时触发的事件	`Function`
select-all	当用户手动勾选全选 Checkbox 时触发的事件	`Function`
selection-change	当选择项发生变化时会触发该事件	`Function`
cell-mouse-enter	当单元格 hover 进入时会触发该事件	`Function`
cell-mouse-leave	当单元格 hover 退出时会触发该事件	`Function`
cell-click	当某个单元格被点击时会触发该事件	`Function`
cell-dblclick	当某个单元格被双击击时会触发该事件	`Function`
cell-contextmenu	当某个单元格被鼠标右键点击时会触发该事件	`Function`
row-click	当某一行被点击时会触发该事件	`Function`
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	`Function`
row-dblclick	当某一行被双击时会触发该事件	`Function`
header-click	当某一列的表头被点击时会触发该事件	`Function`
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	`Function`
sort-change	当表格的排序条件发生变化的时候会触发该事件	`Function`
filter-change	column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件	`Function`
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	`Function`
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	`Function`
expand-change	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	`Function`
scroll	表格被用户滚动后触发	`Function`

Table 插槽

插槽名	说明	子标签
default	自定义默认内容	Table-column
append	插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。	—
empty	当数据为空时自定义的内容	—

Table Exposes

方法名	说明	Type
clearSelection	用于多选表格，清空用户的选择	`Function`
getSelectionRows	返回当前选中的行	`Function`
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否	`Function`
toggleAllSelection	用于多选表格，切换全选和全不选	`Function`
toggleRowExpansion	用于可扩展的表格或树表格，如果某行被扩展，则切换。使用第二个参数，您可以直接设置该行应该被扩展或折叠。	`Function`
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	`Function`
clearSort	用于清空排序条件，数据会恢复成未排序的状态	`Function`
clearFilter	传入由`columnKey` 组成的数组以清除指定列的过滤条件。如果没有参数，清除所有过滤器	`Function`
doLayout	对 Table 进行重新布局。当表格可见性变化时，您可能需要调用此方法以获得正确的布局	`Function`
sort	手动排序表格。参数 `prop` 属性指定排序列，`order` 指定排序顺序。	`Function`
scrollTo	滚动到一组特定坐标	`Function`
setScrollTop	设置垂直滚动位置	`Function`
setScrollLeft	设置水平滚动位置	`Function`
columns	获取表列的 context	`array`
updateKeyChildren	适用于 lazy Table, 需要设置 `rowKey`, 更新 key children	`Function`

Table-column API

Table-column 属性

属性名	说明	Type	默认值
type	对应列的类型。如果设置了`selection`则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮	`enum`	default
index	如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引	`number` / `Function`	—
label	显示的标题	`string`	—
column-key	column 的 key， column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件	`string`	—
prop	字段名称对应列内容的字段名，也可以使用 `property`属性	`string`	—
width	对应列的宽度	`string` / `number`	''
min-width	对应列的最小宽度，对应列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列	`string` / `number`	''
fixed	列是否固定在左侧或者右侧。 `true` 表示固定在左侧	`enum` / `boolean`	false
render-header	列标题 Label 区域渲染使用的 Function	`Function`	—
sortable	对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	`boolean` / `string`	false
sort-method	指定数据按照哪个属性进行排序，仅当`sortable`设置为`true`的时候有效。应该如同 Array.sort 那样返回一个 Number	`Function`	—
sort-by	指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推	`Function` / `string` / `object`	—
sort-orders	数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序	`object`	['ascending', 'descending', null]
resizable	对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）	`boolean`	true
formatter	用来格式化内容	`function`	—
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	`boolean` / `object`	undefined
align	对齐方式	`enum`	left
header-align	表头对齐方式，若不设置该项，则使用表格的对齐方式	`enum`	left
class-name	列的 className	`string`	—
label-class-name	当前列标题的自定义类名	`string`	—
selectable	仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选	`Function`	—
reserve-selection	数据刷新后是否保留选项，仅对 `type=selection` 的列有效，请注意，需指定 `row-key` 来让这个功能生效。	`boolean`	false
filters	数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。数组中的每个元素都需要有 text 和 value 属性。	`array`	—
filter-placement	过滤弹出框的定位	`enum`	—
filter-class-name	过滤弹出框的 className	`string`	—
filter-multiple	数据过滤的选项是否多选	`boolean`	true
filter-method	数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。	`function`	—
filtered-value	选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。	`object`	—
tooltip-formatter	使用 `show-overflow-tooltip` 时自定义 tooltip 内容	`Function`	—

Table-column 插槽

插槽名	说明	类型
default	自定义列的内容	`object`
header	自定义表头的内容，	`object`
filter-icon	自定义 filter 图标	`object`

Type Declarations

显示类型声明

interface Sort {
  prop: string
  order: 'ascending' | 'descending'
  init?: any
  silent?: any
}

interface TreeNode {
  expanded?: boolean
  loading?: boolean
  noLazyChildren?: boolean
  indent?: number
  level?: number
  display?: boolean
}

常见问题解答（FAQ）

如何在表格中使用图像预览？

vue

<template>
  <w-table-column width="180">
    <template #default="scope">
      <w-image preview-teleported :preview-src-list="srcList" />
    </template>
  </w-table-column>
</template>

当使用 DOM 模板时，为什么列没有渲染？

这是因为 HTML 定义只允许一些特定元素省略关闭标签，最常见的是 <input> 和 <img>。对于任意其他元素，如果你省略了关闭标签，原生的 HTML 解析器会认为你从未关闭打开的标签。

详情请参阅 Vue 文档。

Skeleton 骨架屏

Virtualized Table 虚拟化表格

Table 表格 ​

基础表格 ​

固定列和表头 ​

流体高度 ​

多级表头 ​

单选 ​

🎉 多选 ​

排序 ​

筛选 ​

自定义列模板 ​

自定义表头 ​

展开行 ​

树形数据与懒加载 ​

可选择的树形数据 ​

表尾合计行 ​

合并行或列 ​

自定义索引 ​

表格布局 ​

Tooltip 自定义 ​

Table API ​

Table 属性 ​

Table 事件 ​

Table 插槽 ​

Table Exposes ​

Table-column API ​

Table-column 属性 ​

Table-column 插槽 ​

Type Declarations ​

常见问题解答（FAQ） ​

如何在表格中使用图像预览？ ​

当使用 DOM 模板时，为什么列没有渲染？ ​