mirror of https://github.com/ElemeFE/element
[Table] Add Migrating tip for table & rename cell-mouse* event to cell-mouse-* (#572)
parent
6f156643e4
commit
4842047c5b
|
@ -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
|
||||
|
||||
|
|
|
@ -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 |
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
|
|
|
@ -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: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue