Change-Id: I4cb7236ee045f81f3bf54725ba8f1c7d840bbf04
4.5 KiB
Column 表格列
:::tip
Column
组件需要在 Table
组件内使用。
:::
示例
见 Table
示例。
API
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
title |
string |
- | 列标题。 |
field |
string |
- | 列的键名,对应所属的 Table 组件 data 属性数据项的某个字段。 |
width |
`string= | number=` | - |
sortable |
boolean= |
false |
[^sortable] |
align |
string= |
- | 内容对齐方式,支持 left / center / right 。 |
span |
function(number): Object= |
[^span] | |
desc |
string |
- | 表头描述。 |
fixed |
`boolean | 'left' | 'right'` |
filter-value |
* |
- | [^filter-value] |
filter-multiple |
boolean= |
false |
内置筛选是否为多选。 |
filter-options |
Array<Object> |
- | 筛选选项列表,项目的类型为 {label, value, options, disabled, ...} ,可参考 Select 组件的 options 属性。 |
filter-title |
string= |
- | 筛选下拉的标题。 |
allowed-orders |
Array |
[false, 'desc', 'asc'] |
[^allowed-orders] |
tooltip |
`boolean | ((item: Object) => string)` | - |
^^^sortable 本列是否支持排序。
:::warning
组件本身不会处理排序逻辑,仅会在排序按钮被点击时在 Table
上抛出 sort
事件,使用者需要自行处理排序逻辑。
:::
^^^
^^^span
单元格合并配置。类型为 function(index: number): { row: number, col: number }
。index
为当前行在所属 Table
组件的 data
属性中的索引。返回值的 row
/ col
字段对应于单元格的 rowspan
/ colspan
,默认值均为 1
。
:::tip
可以参考 Table
组件中的示例 › 选择模式与排序来了解如何使用。
:::
^^^
^^^filter-value
:::badges
.sync
:::
筛选条件取值,值为 null
表示未经过筛选。当 filter-multiple
为 true
时,值为已选项值的数组。
^^^
^^^allowed-orders 指定该列的排序范围。用户点击时将按设定的顺序进行切换。
+++值范围
值 | 描述 |
---|---|
false |
不排序。 |
'asc' |
升序。 |
'desc' |
降序。 |
+++ | |
^^^ |
插槽
名称 | 描述 |
---|---|
head |
列头区域。 |
foot |
[^slot-foot] |
default |
[^slot-default] |
sub-row |
[^slot-sub-row] |
desc |
[^slot-desc] |
filter |
[^slot-filter] |
^^^slot-foot 列脚区域。
:::warning
如果所属的 Table
组件定义了 foot
插槽,单独的列脚配置将被覆盖。
:::
^^^
^^^slot-default 单元格的内容。
默认内容:表格 data
数据项中与 field
属性对应的字段值。
作用域参数为 data
内当前行数据中的所有字段。
^^^
^^^slot-sub-row
展开行后子行的内容。使用此插槽时,内容会作为行展开下方子行中对应列的单元格内容。行数据源来自 data
中对应主行数据的 children
数组,展开的子行数与 children
内数据项数相同,使用相同的列配置。
默认内容:表格 data[i].children[j]
数据项中与 field
属性对应的字段值。
作用域参数当前子行数据中的所有字段,以及当前主行对应索引值 index
。
:::warning
如果所属的 Table
组件定义了 sub-row
插槽,单独列的 sub-row
插槽将被覆盖。
:::
^^^
^^^slot-desc
表头描述。使用此插槽时会覆盖 Column
的 desc
属性。
+++作用域参数
名称 | 类型 | 描述 |
---|---|---|
close |
function(): void |
关闭展现描述内容的容器。 |
+++ | ||
^^^ |
^^^slot-filter 筛选浮层的内容。
+++作用域参数
名称 | 类型 | 描述 |
---|---|---|
close |
function(): void |
关闭筛选浮层。 |
+++ | ||
^^^ |
事件
名称 | 描述 |
---|---|
filterchange |
修改该列过滤器时触发。回调参数为 (value) 。value 为过滤器的当前值。 |