说明：
项目涉及到手动排课需要单元格拖拽互换课程开始使用的onmousedown实现，看到element tree控件增加了拖拽功能做了单元格拖拽。 demo segmentfault.com/a/119000001…
修改element：
clone element项目找到packages>table
1.更改element table-body.js
return (
<td
style={ this.getCellStyle($index, cellIndex, row, column) }
class={ this.getCellClass($index, cellIndex, row, column) }
on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
on-mouseleave={ this.handleCellMouseLeave }
draggable={ this.draggable }
on-dragstart={ ($event) =>{$event.stopPropagation(); this.handleDragStart($event, row);} }
on-dragover={ ($event) =>{$event.stopPropagation(); this.handleDragOver($event, row);} }
on-dragend={ ($event) =>{$event.stopPropagation(); this.handleDragEnd($event, row);} }
on-drop={ ($event) =>{$event.stopPropagation(); this.handleDrop($event, row);} }
on-mousedown={ ($event) => this.handleCellMousedown($event, row) }
on-mouseup={ ($event) => this.handleCellMouseup($event, row) }>
{
column.renderCell.call(
this._renderProxy,
h,
{
row,
column,
$index,
store: this.store,
_self: this.context || this.table.$vnode.context
},
columnsHidden[cellIndex] ) }
</td>
);
handleDragStart(event, row) {
const table = this.table;
const cell = getCell(event);
if (cell) {
const column = getColumnByCell(table, cell);
const hoverState = table.hoverState = {cell, column, row};
table.$emit('tree-node-drag-start', hoverState.row, hoverState.column, hoverState.cell, event);
}
},
handleDragOver(event, row) {
const table = this.table;
const cell = getCell(event);
if (cell) {
const column = getColumnByCell(table, cell);
const hoverState = table.hoverState = {cell, column, row};
table.$emit('tree-node-drag-over', hoverState.row, hoverState.column, hoverState.cell, event);
}
event.preventDefault();
},
handleDrop(event, row) {
event.preventDefault();
},
handleDragEnd(event, row) {
const table = this.table;
const cell = getCell(event);
if (cell) {
const column = getColumnByCell(table, cell);
const hoverState = table.hoverState = {cell, column, row};
table.$emit('tree-node-drag-end', hoverState.row, hoverState.column, hoverState.cell, event);
}
},
handleCellMousedown(event, row) {
const table = this.table;
const cell = getCell(event);
if (cell) {
const column = getColumnByCell(table, cell);
const hoverState = table.hoverState = {cell, column, row};
table.$emit('cell-mouse-up', hoverState.row, hoverState.column, hoverState.cell, event, table);
}
},
2.更改table.vue
created() {
this.tableId = 'el-table_' + tableIdSeed++;
this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
let dragState = this.dragState;
this.$on('tree-node-drag-start', (row, column, cell, event) => {
if (typeof this.allowDrag === 'function' && !this.allowDrag(row, column, cell, event)) {
event.preventDefault();
return false;
}
event.dataTransfer.effectAllowed = 'move';
// wrap in try catch to address IE's error when first param is 'text/plain'
try { // setData is required for draggable to work in FireFox
// the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
event.dataTransfer.setData('text/plain', '');
} catch (e) {}
dragState.draggingNode = cell;
this.$emit('node-drag-start', row, column, cell, event);
});
this.$on('tree-node-drag-over', (row, column, cell, event) => {
const dropNode = cell;
const oldDropNode = dragState.dropNode;
// if (oldDropNode && oldDropNode !== dropNode) {
// removeClass(oldDropNode.$el, 'is-drop-inner');
// }
const draggingNode = dragState.draggingNode;
if (!draggingNode || !dropNode) return;
let allowDrop = true;
if (typeof this.allowDrop === 'function' && !this.allowDrop(row, column, cell, event)) {
allowDrop = false;
}
dragState.allowDrop = allowDrop;
event.dataTransfer.dropEffect = allowDrop ? 'move' : 'none';
if (allowDrop && oldDropNode !== dropNode) {
if (oldDropNode) {
oldDropNode.style.backgroundColor = '';
this.$emit('node-drag-leave', row, column, cell, event, draggingNode, dropNode);
}
dropNode.style.backgroundColor = '#EF490C';
this.$emit('node-drag-enter', row, column, cell, event, draggingNode, dropNode);
}
this.$emit('node-drag-over', row, column, cell, event, draggingNode, dropNode);
if (allowDrop) {
dragState.dropNode = dropNode;
}
});
this.$on('tree-node-drag-end', (row, column, cell, event) => {
const { draggingNode, dropNode } = dragState;
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
if (draggingNode && dropNode) {
dropNode.style.backgroundColor = '';
this.$emit('node-drag-end', row, column, cell, event, draggingNode, dropNode);
this.$emit('node-drop', row, column, cell, event, draggingNode, dropNode);
}
if (draggingNode && !dropNode) {
this.$emit('node-drag-end', row, column, cell, event, draggingNode, dropNode);
}
dragState.showDropIndicator = false;
dragState.draggingNode = null;
dragState.dropNode = null;
dragState.allowDrop = true;
});
},
3.之后打包替换lib文件，在项目引用
<el-table
ref = "table"
draggable
:data="tableDatasch"
@cell-mouse-leave ="mouseleave"
@cell-mouse-enter ="mouseenter"
:span-method="arraySpanMethod"
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
:allow-drag="allowDrag"
:allow-drop="allowDrop"
@cell-click="nodeclick" >
