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

pull/578/head
FuryBean 2016-10-21 17:53:49 +08:00 committed by GitHub
parent 6f156643e4
commit 4842047c5b
5 changed files with 76 additions and 7 deletions

View File

@ -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

View File

@ -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 |

View File

@ -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) {

View File

@ -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();
},

50
src/mixins/migrating.js Normal file
View File

@ -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: {}
};
}
}
};