Menu
Back to top

表格 Table

用于数据收集展示、分析整理、操作处理

基本使用

表格的基本用法，需要传递 columns 和 data

行选择器

通过配置 column 里面 type 为 checkbox即可。table上面绑定v-model:selection即可实现双向绑定

索引

通过配置 column 里面 type 为 index即可

排序

通过配置 column 里面 sortable 为 true即可。

表格属性

这里罗列了一些表格的属性，你可以方便的打开或关闭一些属性，查看它的效果。

固定表头

设置table height 即可

流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置 max-height 属性为 table 指定最大高度。 此时若表格所需的高度大于最大高度，则会显示一个滚动条

固定列

通过配置 column 里面 fixed 即可。fixed 可选值 left 、right、undefined

表格config配置

通过配置 config 属性 {setting: true} 即可开启对表格 column 的操作

自定义渲染

通过在column里面配置插槽slotName渲染数据，配置 headerSlotName 渲染表头。你也可以直接 column 中配置 renderCell 函数来渲染渲染数据，配置 renderHeader 函数来渲染表头。如果你既用了插槽也用了渲染函数，那么渲染函数的优先级高于插槽。

TableData & TableColumnData 


export interface TableData {
  key?: string
  expand?: string | RenderFunction
  children?: TableData[]
  disabled?: boolean
  isLeaf?: boolean
  [name: string]: any
}


export interface TableColumnData {
  type?: TableColumnTypes
  prop?: string
  title?: string
  width?: number
  minWidth?: number
  align?: 'left' | 'center' | 'right'
  fixed?: 'left' | 'right'
  ellipsis?: boolean
  tooltip?: boolean | Record<string, any>
  sortable?: boolean
  filterable?: TableFilterable
  children?: TableColumnData[]
  renderCell?: (data: {
    row: TableData
    column: TableColumnData
    rowIndex: number
  }) => VNode | string | number
  renderHeader?: (data: { column: TableColumnData }) => VNode | string | number
  renderIndex?: (data: { column: TableColumnData; index: number }) => number
  slotName?: string
  headerSlotName?: string
  hiddenCheckboxAll?: boolean

  hidden?: boolean
  disabled?: boolean
  checked?: boolean

  // private
  isLastLeftFixed?: boolean
  isFirstRightFixed?: boolean
  colSpan?: number
  rowSpan?: number
  index?: number
  parent?: TableColumnData
}

API

Table Attributes

属性名描述类型默认值
data表格数据TableData[]-
columns表格列配置TableColumnData[]-
height设置height属性可以固定表头string | number-
maxHeight设置maxHeight可以实现流式高度string | number-
hover鼠标移入row样式boolean-
v-model:selection多选array-
loadingLoading,加载数据时候用booleanfalse
default-sort默认sort升序降序，column的prop，是否需要弹出层popup{sort: 'ascend' | 'descend', prop: string, popup:boolean}-
rowHeight设置rowHeight可以改变row高度string | number68
stripe斑纹样式boolean-
border表格边框booleanfalse
hover表格列hoverbooleanfalse
columnResizable是否可以拖拽改变column的宽度,相关联border属性必须为truebooleanfalse
config表格配置项{setting:boolean}-

Table Column Option

属性描述类型默认值
type表格操作类型checkbox | index-
prop列信息的标识，对应TableData中的数据，可支持链式。如a.b.cstring-
title列标题string | number-
width列宽度string | number-
sortable列是否可排序booleanfalse
align文本对齐方向left | center | rightleft
fixed固定位置，必须设置宽度widthleft | right-
slotName列数据插槽string-
headerSlotName列标题插槽string-
hidden列是否隐藏booleanfalse
disabled列是否禁用booleanfalse
hiddenCheckboxAll只有type是checkbox时会生效，默认表头显示全选，设为true后表头不显示全选booleanfalse

Table Events

事件名描述函数类型
selection-change当绑定selection变化时触发的事件(selection: TableData[]) => void

Table Slots

name描述scoped
header头部插槽-
footer尾部插槽-

最后更新时间: