[Table] Add Migrating tip for table & rename cell-mouse* event to cell-mouse-* (#572)

CHANGELOG.md

@@ -12,7 +12,7 @@
 - 修复 Loading 关闭后有几率滚动失效的问题
 - 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
 - 修复 Switch 的 width 属性无效的问题
-- Table 增加属性 rowClassName
+- Table 增加 rowClassName 属性
 - TableColumn 增加 fixed 属性，可选值：true, false, left, right
 - TableColumn[type="selection"] 增加 selectable 属性
 - 修复 Input textarea 在动态赋值时 autosize 没有触发的问题
@@ -25,8 +25,7 @@
 
 - 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
 - Table 删除属性 fixedColumnCount, customCriteria, customBackgroundColors
-- Table 的 allow-no-selection 属性更名为 allow-no-current-row
-- Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouseenter、cell-mouseleave、cell-click。
+- Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。
 
 ### 1.0.0-rc.7
 

examples/docs/zh-cn/table.md

@@ -827,8 +827,8 @@
 | select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection |
 | select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
 | selection-change | 当选择项发生变化时会触发该事件 | selection |
-| cell-mouseenter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
-| cell-mouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
+| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
+| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
 | row-click | 当某一行被点击时会触发该事件 | row, event |
 

packages/table/src/table-body.js

@@ -134,7 +134,7 @@ export default {
       if (cell) {
         const column = getColumnByCell(table, cell);
         const hoverState = table.hoverState = { cell, column, row };
-        table.$emit('cell-mouseenter', hoverState.row, hoverState.column, hoverState.cell, event);
+        table.$emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event);
       }
 
       // 判断是否text-overflow, 如果是就显示tooltip
@@ -148,7 +148,7 @@ export default {
       if (!cell) return;
 
       const oldHoverState = this.$parent.hoverState;
-      this.$parent.$emit('cell-mouseleave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
+      this.$parent.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
     },
 
     handleMouseEnter(index) {

packages/table/src/table.vue

@@ -84,6 +84,7 @@
 </template>
 
 <script type="text/babel">
+  import Migrating from 'element-ui/src/mixins/migrating';
   import throttle from 'throttle-debounce/throttle';
   import debounce from 'throttle-debounce/debounce';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
@@ -97,6 +98,8 @@
   export default {
     name: 'el-table',
 
+    mixins: [Migrating],
+
     props: {
       data: {
         type: Array,
@@ -129,6 +132,23 @@
     },
 
     methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'allow-no-selection': 'allow-no-selection is removed.',
+            'selection-mode': 'selection-mode is removed.',
+            'fixed-column-count': 'fixed-column-count is removed. Use fixed prop in TableColumn instead.',
+            'custom-criteria': 'custom-criteria is removed. Use row-class-name instead.',
+            'custom-background-colors': 'custom-background-colors is removed. Use row-class-name instead.'
+          },
+          events: {
+            selectionchange: 'selectionchange is renamed to selection-change.',
+            cellmouseenter: 'cellmouseenter is renamed to cell-mouse-enter.',
+            cellmouseleave: 'cellmouseleave is renamed to cell-mouse-leave.',
+            cellclick: 'cellclick is renamed to cell-click.'
+          }
+        };
+      },
       clearSelection() {
         this.store.clearSelection();
       },

src/mixins/migrating.js

@@ -0,0 +1,50 @@
+/**
+ * Show migrating guide in browser console.
+ *
+ * Usage:
+ * import Migrating from 'element-ui/src/mixins/migrating';
+ *
+ * mixins: [Migrating]
+ *
+ * add getMigratingConfig method for your component.
+ *  getMigratingConfig() {
+ *    return {
+ *      props: {
+ *        'allow-no-selection': 'allow-no-selection is removed.',
+ *        'selection-mode': 'selection-mode is removed.'
+ *      },
+ *      events: {
+ *        selectionchange: 'selectionchange is renamed to selection-change.'
+ *      }
+ *    };
+ *  },
+ */
+export default {
+  mounted() {
+    if (process.env.NODE_ENV === 'production') return;
+    const { props, events } = this.getMigratingConfig();
+    const { data, componentOptions } = this.$vnode;
+    const definedProps = data.attrs || {};
+    const definedEvents = componentOptions.listeners || {};
+
+    for (let propName in definedProps) {
+      if (definedProps.hasOwnProperty(propName) && props[propName]) {
+        console.warn(`[Element Migrating][Attribute]: ${props[propName]}`);
+      }
+    }
+
+    for (let eventName in definedEvents) {
+      if (definedEvents.hasOwnProperty(eventName) && events[eventName]) {
+        console.warn(`[Element Migrating][Event]: ${events[eventName]}`);
+      }
+    }
+  },
+  methods: {
+    getMigratingConfig() {
+      return {
+        props: {},
+        events: {}
+      };
+    }
+  }
+};