Are you an LLM? You can read better optimized documentation at /component/table.md for this page in Markdown formatTable 表格 用于展示多条结构类似的数据，支持固定列、排序、合并单元格与虚拟滚动等能力。
组件类型 基本用法 通过 data 传入表格数据，通过多个 wd-table-column 定义列结构。sort-method 事件在点击可排序列表头时触发，row-click 事件在点击行时触发。
templatescripthtml
tsimport type { TableColumn } from '@/uni_modules/wot-ui/components/wd-table-column/types'
import { ref } from 'vue'
interface TableData {
name: string
school: string
major: string
gender: string
graduation: string
grade: number
compare: string
hobby: string
}
const dataList = ref
{
name: '关羽',
school: '武汉市阳逻绿豆学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 66,
compare: '48%',
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 68,
compare: '21%',
hobby: '我得孔明，如鱼得水也'
}
])
function handleSort(column: TableColumn) {
dataList.value = dataList.value.reverse()
}
function handleRowClick({ rowIndex }: { rowIndex: number }) {
console.log(rowIndex)
}固定列 通过 wd-table-column 的 fixed 属性固定列。固定列仅支持固定在左侧，固定列的书写顺序需要与最终展示顺序一致。
html
显示索引 通过 index 开启序号列。传入对象时，可配置索引列的宽度、对齐方式等属性（prop 除外的所有 TableColumn 属性）。
html
自定义列模板 wd-table-column 提供 value 作用域插槽，插槽参数为 { row, index }，可拿到当前行数据与行索引，自定义单元格内容。
html
合并单元格 通过 span-method 控制单元格跨行跨列。回调接收 { row, column, rowIndex, columnIndex } 四个参数，返回 { rowspan, colspan } 或 void（等同 { rowspan: 1, colspan: 1 }）。rowspan/colspan 为 0 表示该单元格被合并隐藏。
templatescripthtml
tsimport type { SpanMethodParams } from '@/uni_modules/wot-ui/components/wd-table/types'
import { computed } from 'vue'
const spanData = computed(() => dataList.value.slice(0, 5))
function handleSpan({ rowIndex, columnIndex }: SpanMethodParams) {
if (rowIndex === 0 && columnIndex === 0) {
return { rowspan: 1, colspan: 2 }
}
if (rowIndex === 0 && columnIndex === 1) {
return { rowspan: 0, colspan: 0 }
}
if (rowIndex === 2 && columnIndex === 0) {
return { rowspan: 2, colspan: 1 }
}
if (rowIndex === 3 && columnIndex === 0) {
return { rowspan: 0, colspan: 0 }
}
}合并自定义列 span-method 可以与 value 插槽组合使用，对自定义渲染的列同样生效。
templatescripthtml
tsfunction handleCustomSpan({ rowIndex, columnIndex }: SpanMethodParams) {
if (rowIndex === 0 && columnIndex === 0) {
return { rowspan: 2, colspan: 1 }
}
if (rowIndex === 1 && columnIndex === 0) {
return { rowspan: 0, colspan: 0 }
}
if (rowIndex === 3 && columnIndex === 2) {
return { rowspan: 1, colspan: 2 }
}
if (rowIndex === 3 && columnIndex === 3) {
return { rowspan: 0, colspan: 0 }
}
}固定列合并 固定列场景下同样支持单元格合并，span-method 与 fixed 可同时使用。
templatescripthtml
tsfunction handleFixedSpan({ rowIndex, columnIndex }: SpanMethodParams) {
if (rowIndex === 1 && columnIndex === 1) {
return { rowspan: 2, colspan: 1 }
}
if (rowIndex === 2 && columnIndex === 1) {
return { rowspan: 0, colspan: 0 }
}
if (rowIndex === 3 && columnIndex === 3) {
return { rowspan: 1, colspan: 2 }
}
if (rowIndex === 3 && columnIndex === 4) {
return { rowspan: 0, colspan: 0 }
}
}固定表头合并 设置 height 后表头默认固定（fixed-header 默认为 true），此时仍可通过 span-method 合并表体单元格。
templatescripthtml
tsfunction handleHeaderSpan({ rowIndex, columnIndex }: SpanMethodParams) {
if (rowIndex === 0 && columnIndex === 2) {
return { rowspan: 2, colspan: 1 }
}
if (rowIndex === 1 && columnIndex === 2) {
return { rowspan: 0, colspan: 0 }
}
if (rowIndex === 4 && columnIndex === 3) {
return { rowspan: 2, colspan: 1 }
}
if (rowIndex === 5 && columnIndex === 3) {
return { rowspan: 0, colspan: 0 }
}
}虚拟滚动 大数据量场景可开启 virtual，通过 row-height 指定固定行高（必填），buffer 控制可视区域上下额外预渲染行数。
templatescripthtml
tsconst virtualData = Array.from({ length: 10000 }, (_, index) => ({
index: index + 1,
name: `蜀兵${index + 1}号`,
score: Math.floor(Math.random() * 100),
remark: `这是蜀兵${index + 1}号的备注信息`
}))组件状态 无边框 设置 border 为 false 可隐藏单元格边框。
html
无斑马纹 设置 stripe 为 false 可关闭奇偶行区分背景。
html
不显示表头 设置 show-header 为 false 可隐藏表头区域。
html
特殊样式 不固定表头结合分页器 将 fixed-header 设为 false 后，表头随表体一起滚动，可将表格与分页器组合展示。
templatescripthtml
const page = ref(1)
const pageSize = ref(10)
const total = ref(dataList.value.length)
const paginationData = computed(() => {
return dataList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
})Table Attributes 参数说明类型默认值data表格数据源（必填）Record
import type { TableColumn, AlignType } from '@/uni_modules/wot-ui/components/wd-table-column/types'
/** span-method 回调参数 */
interface SpanMethodParams {
/** 当前行的数据对象 */
row: Record
/** 当前列的配置 */
column: { prop: string; label: string }
/** 当前行索引，从 0 开始 */
rowIndex: number
/** 当前列索引，从 0 开始 */
columnIndex: number
}
/** span-method 返回值 */
interface SpanMethodResult {
/** 合并行数，0 表示该单元格被隐藏，大于 1 表示向下合并 N 行 */
rowspan: number
/** 合并列数，0 表示该单元格被隐藏，大于 1 表示向右合并 N 列 */
colspan: number
}
type SpanMethod = (params: SpanMethodParams) => SpanMethodResult | void主题定制 CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
名称默认值描述--wot-table-bg$filled-oppo表格背景色--wot-table-color$text-main表格文字颜色--wot-table-stripe-bg$filled-bottom斑马纹背景色--wot-table-border-color$border-main边框颜色--wot-table-border-width$stroke-main边框宽度--wot-table-cell-font-size$typography-body-size-main单元格字号--wot-table-cell-line-height$typography-body-line-height-size-main单元格行高--wot-table-cell-padding$padding-loose $padding-extra-loose单元格内边距--wot-table-shadow-gradientlinear-gradient(270deg, $base-transparent 0%, $opac-2_04 100%)固定列阴影渐变背景--wot-table-sort-button-height$n-20排序按钮高度源代码 文档
• 组件