2020-08-13 11:47:56 +08:00
|
|
|
|
# Column <small>表格列</small>
|
|
|
|
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
|
|
`Column` 组件需要在 [`Table`](./table) 组件内使用。
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
|
|
见 [`Table` 示例](./table#示例)。
|
|
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
|
|
### 属性
|
|
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
|
| `title` | `string` | - | 列标题。 |
|
|
|
|
|
|
| `field` | `string` | - | 列的键名，对应所属的 `Table` 组件 `data` 属性数据项的某个字段。 |
|
|
|
|
|
|
| `width` | `string=|number=` | - | 列宽，值为像素值。 |
|
|
|
|
|
|
| `sortable` | `boolean=` | `false` | [^sortable] |
|
|
|
|
|
|
| `align` | `string=` | - | 内容对齐方式，支持 `left`/`center`/`right`。 |
|
2020-09-22 11:06:13 +08:00
|
|
|
|
| `span` | `function(number): Object=` | | [^span] |
|
2020-12-01 10:54:01 +08:00
|
|
|
|
| `desc` | `string` | - | 表头描述。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
|
|
^^^sortable
|
|
|
|
|
|
本列是否支持排序。
|
|
|
|
|
|
|
|
|
|
|
|
:::warning
|
|
|
|
|
|
组件本身不会处理排序逻辑，仅会在排序按钮被点击时在 `Table` 上抛出 `sort` 事件，使用者需要自行处理排序逻辑。
|
|
|
|
|
|
:::
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
^^^span
|
|
|
|
|
|
单元格合并配置。类型为 `function(index: number): { row: number, col: number }`。`index` 为当前行在所属 `Table` 组件的 `data` 属性中的索引。返回值的 `row`/`col` 字段对应于单元格的 `rowspan`/`colspan`，默认值均为 `1`。
|
|
|
|
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
|
|
可以参考 `Table` 组件中的[示例 › 高级](./table#高级)来了解如何使用。
|
|
|
|
|
|
:::
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
|
| -- | -- |
|
|
|
|
|
|
| `head` | 列头区域。 |
|
|
|
|
|
|
| `foot` | [^slot-foot] |
|
|
|
|
|
|
| `default` | [^scoped-slot-default] |
|
|
|
|
|
|
| `sub-row` | [^scoped-slot-sub-row] |
|
2020-12-01 10:54:01 +08:00
|
|
|
|
| `desc` | [^scoped-slot-desc] |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
|
|
^^^slot-foot
|
|
|
|
|
|
列脚区域。
|
|
|
|
|
|
|
|
|
|
|
|
:::warning
|
|
|
|
|
|
如果所属的 `Table` 组件定义了 `foot` 插槽，单独的列脚配置将被覆盖。
|
|
|
|
|
|
:::
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
^^^scoped-slot-default
|
|
|
|
|
|
单元格的内容。
|
|
|
|
|
|
|
|
|
|
|
|
默认内容：表格 `data` 数据项中与 `field` 属性对应的字段值。
|
|
|
|
|
|
|
|
|
|
|
|
作用域参数为 `data` 内当前行数据中的所有字段。
|
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
|
|
^^^scoped-slot-sub-row
|
|
|
|
|
|
展开行后子行的内容。使用此插槽时，内容会作为行展开下方子行中对应列的单元格内容。行数据源来自 `data` 中对应主行数据的 `children` 数组，展开的子行数与 `children` 内数据项数相同，使用相同的列配置。
|
|
|
|
|
|
|
|
|
|
|
|
默认内容：表格 `data[i].children[j]` 数据项中与 `field` 属性对应的字段值。
|
|
|
|
|
|
|
|
|
|
|
|
作用域参数当前子行数据中的所有字段，以及当前主行对应索引值 `index`。
|
|
|
|
|
|
|
|
|
|
|
|
:::warning
|
2020-11-17 20:00:08 +08:00
|
|
|
|
如果所属的 `Table` 组件定义了插槽 `sub-row`，单独列的 `sub-row` 将被覆盖。
|
2020-08-13 11:47:56 +08:00
|
|
|
|
:::
|
|
|
|
|
|
^^^
|
2020-12-01 10:54:01 +08:00
|
|
|
|
|
|
|
|
|
|
^^^scoped-slot-desc
|
|
|
|
|
|
表头描述。提供 `close` 函数，用于关闭展现描述内容的容器。使用此插槽时会覆盖 `Column` 的插槽 `desc` 内容。
|
|
|
|
|
|
^^^
|
