docs_vue2/one/docs/components/column.md
xiaodemen aa9ad39d79 docs: update docs and diff scripts
Change-Id: I4cb7236ee045f81f3bf54725ba8f1c7d840bbf04
2022-03-25 11:43:39 +08:00

4.5 KiB
Raw Blame History

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-multipletrue 时,值为已选项值的数组。 ^^^

^^^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 表头描述。使用此插槽时会覆盖 Columndesc 属性。

+++作用域参数

名称 类型 描述
close function(): void 关闭展现描述内容的容器。
+++
^^^

^^^slot-filter 筛选浮层的内容。

+++作用域参数

名称 类型 描述
close function(): void 关闭筛选浮层。
+++
^^^

事件

名称 描述
filterchange 修改该列过滤器时触发。回调参数为 (value)value 为过滤器的当前值。