table單元格拖拽(vue)

說明：

項目涉及到手動排課須要單元格拖拽互換課程開始使用的onmousedown實現，看到element tree控件增長了拖拽功能作了單元格拖拽。

修改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" >
複製代碼