docs_vue2/one/docs/components/column.md

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	-	表头描述。
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]

^^^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	关闭筛选浮层。
+++
^^^