Merge pull request #825 from furybean/table-column

Table Column: watch more prop & rename showTooltipWhenOverflow.

CHANGELOG.md

@@ -14,6 +14,7 @@
 - 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题
 - 改善 tabs 现在支持动态更新
 - Table 新增 highlightCurrentRow 属性、新增 current-change 事件
+- TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）
 - Pagination 新增 pageCount 属性
 
 #### 非兼容性更新

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
 <template>
   <el-table
@@ -696,7 +696,7 @@
     <el-table-column
       prop="address"
       label="地址"
-      show-tooltip-when-overflow>
+      show-overflow-tooltip>
     </el-table-column>
   </el-table>
 </template>
@@ -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) | - | - |

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
         ? <el-tooltip
             effect={ this.effect }
             placement="top"
@@ -261,6 +259,45 @@ export default {
       if (this.columnConfig) {
         this.columnConfig.property = newVal;
       }
+    },
+
+    filters(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.filters = newVal;
+      }
+    },
+
+    filterMultiple(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.filterMultiple = newVal;
+      }
+    },
+
+    align(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.align = newVal;
+      }
+    },
+
+    width(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.width = newVal;
+        this.owner.scheduleLayout();
+      }
+    },
+
+    minWidth(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.minWidth = newVal;
+        this.owner.scheduleLayout();
+      }
+    },
+
+    fixed(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.fixed = newVal;
+        this.owner.scheduleLayout();
+      }
     }
   },
 

test/unit/specs/table.spec.js

@@ -482,7 +482,16 @@ describe('Table', () => {
       }, 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);