From d37e0dbd3921f5343d0fc9570c5020c53c52db36 Mon Sep 17 00:00:00 2001 From: Akira Komamura Date: Sun, 13 Nov 2016 00:39:24 -0600 Subject: [PATCH] Add column class-name to the table header and update documentation (#1027) * Table: Add className property to columns * Table: update documentation on column class-name * Table: Apply column class-name to table header --- examples/docs/en-US/table.md | 1 + examples/docs/zh-CN/table.md | 1 + packages/table/src/table-body.js | 2 +- packages/table/src/table-column.js | 2 ++ packages/table/src/table-header.js | 2 +- test/unit/specs/table.spec.js | 12 ++++++++++++ 6 files changed, 18 insertions(+), 2 deletions(-) diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 627cf2da7..aa63ffd1a 100644 --- a/examples/docs/en-US/table.md +++ b/examples/docs/en-US/table.md @@ -1007,6 +1007,7 @@ Filter the table to find desired data. | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false | | inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object, and current context can be accessed by `_self` in JSX. In this case you don't need to set `prop`. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), _self( context), store (table store) }` | — | — | | align | alignment | string | left/center/right | left | +| class-name | class name of cells in the column | string | — | — | | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — | | reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false | | filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index b2a11d7a1..1c6eaf3f4 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1010,6 +1010,7 @@ | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false | | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), _self(当前上下文), store(table store) }` 的信息。 | — | — | | align | 对齐方式 | String | left, center, right | left | +| class-name | 列的 className | string | — | — | | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — | | reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false | | filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — | diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index 6110cad1a..9f431bec6 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -39,7 +39,7 @@ export default { { this._l(this.columns, (column, cellIndex) => this.handleCellMouseEnter($event, row) } on-mouseleave={ this.handleCellMouseLeave }> { diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js index 3bee9c1a0..139068853 100644 --- a/packages/table/src/table-column.js +++ b/packages/table/src/table-column.js @@ -85,6 +85,7 @@ export default { default: 'default' }, label: String, + className: String, property: String, prop: String, width: {}, @@ -177,6 +178,7 @@ export default { let column = getDefaultColumn(type, { id: columnId, label: this.label, + className: this.className, property: this.prop || this.property, type, renderCell: DEFAULT_RENDER_CELL, diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index 81d8b8ef8..89d419866 100644 --- a/packages/table/src/table-header.js +++ b/packages/table/src/table-header.js @@ -33,7 +33,7 @@ export default { on-mousemove={ ($event) => this.handleMouseMove($event, column) } on-mouseout={ this.handleMouseOut } on-mousedown={ ($event) => this.handleMouseDown($event, column) } - class={ [column.id, column.order, column.align, this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }> + class={ [column.id, column.order, column.align, column.className || '', this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }>
0 ? 'highlight' : ''] }> { column.renderHeader diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js index b4c6d0005..90473796d 100644 --- a/test/unit/specs/table.spec.js +++ b/test/unit/specs/table.spec.js @@ -570,6 +570,18 @@ describe('Table', () => { }, DELAY); }); + it('class-name', done => { + const vm = createTable('class-name="column-1"', 'class-name="column-2 column-class-a"', 'class-name="column-class-a"'); + setTimeout(_ => { + var len = getTestData().length + 1; + expect(vm.$el.querySelectorAll('.column-1')).to.length(len); + expect(vm.$el.querySelectorAll('.column-2')).to.length(len); + expect(vm.$el.querySelectorAll('.column-class-a')).to.length(len * 2); + destroyVM(vm); + done(); + }, DELAY); + }); + it('selectable', done => { const vm = createVue({ template: `