From aac3ec40c2518aa19e13a7bca912fed3362b39a8 Mon Sep 17 00:00:00 2001 From: furybean Date: Fri, 4 Nov 2016 16:27:51 +0800 Subject: [PATCH] Table Column: watch more prop & rename showTooltipWhenOverflow. --- CHANGELOG.md | 1 + examples/docs/zh-cn/table.md | 6 ++-- packages/table/src/table-column.js | 49 ++++++++++++++++++++++++++---- test/unit/specs/table.spec.js | 11 ++++++- 4 files changed, 57 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e3eeaf2e..f4020b0ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ - 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题 - 改善 tabs 现在支持动态更新 - Table 新增 highlightCurrentRow 属性、新增 current-change 事件 +- TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用） - Pagination 新增 pageCount 属性 #### 非兼容性更新 diff --git a/examples/docs/zh-cn/table.md b/examples/docs/zh-cn/table.md index f4de10feb..f94482ff5 100644 --- a/examples/docs/zh-cn/table.md +++ b/examples/docs/zh-cn/table.md @@ -670,7 +670,7 @@ 选择多行数据时使用 Checkbox。 -:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`：设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`prop`属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。 +:::demo 实现多选非常简单: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-overflow-tooltip`：设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`prop`属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。 ```html @@ -934,7 +934,7 @@ | resizable | 对应列是否可以通过拖动改变宽度（如果需要在 el-table 上设置 border 属性为真） | boolean | — | true | | type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — | | formatter | 用来格式化内容 | Function(row, column) | — | — | -| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | — | false | +| 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 | | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | - | - | diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js index 22f75b376..c960ead26 100644 --- a/packages/table/src/table-column.js +++ b/packages/table/src/table-column.js @@ -97,10 +97,8 @@ export default { default: true }, align: String, - showTooltipWhenOverflow: { - type: Boolean, - default: false - }, + showTooltipWhenOverflow: Boolean, + showOverflowTooltip: Boolean, fixed: [Boolean, String], formatter: Function, selectable: Function, @@ -194,7 +192,7 @@ export default { sortable: this.sortable, sortMethod: this.sortMethod, resizable: this.resizable, - showTooltipWhenOverflow: this.showTooltipWhenOverflow, + showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow, formatter: this.formatter, selectable: this.selectable, reserveSelection: this.reserveSelection, @@ -225,7 +223,7 @@ export default { }; } - return _self.showTooltipWhenOverflow + return _self.showOverflowTooltip || _self.showTooltipWhenOverflow ? { }, DELAY); }); - it('show-tooltip-when-overflow', done => { + it('show-overflow-tooltip', done => { + const vm = createTable('show-overflow-tooltip'); + setTimeout(_ => { + expect(vm.$el.querySelectorAll('.el-tooltip')).to.length(5); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('show-tooltip-when-overflow', done => { // old version prop name const vm = createTable('show-tooltip-when-overflow'); setTimeout(_ => { expect(vm.$el.querySelectorAll('.el-tooltip')).to.length(5);