vxe-table表格自定义拖拽，列宽，行编辑，行/列颜色设置。

1. 父组件

      
       //插槽
       
     

2. 子组件

:cell-style="cellStyle"
      :row-style="rowStyle"
    >
      
      
        
        
      
      
        
      
    

子组件方法详解

1.列拖动 

安装sortablejs，并在子组件引入

import Sortable from 'sortablejs'

　　实现

mounted() {
    this.columnDrop1();
  },

//列拖动
    columnDrop1() {
      this.$nextTick(() => {
        let xTable = this.$refs.table_tree;
        this.sortable = Sortable.create(
          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
          {
            handle: '.vxe-header--column',
            onEnd: ({newIndex, oldIndex}) => {
              console.log(newIndex, oldIndex);
              let tableColumn = xTable.getColumns();
              let currRow = tableColumn.splice(oldIndex, 1)[0];
              tableColumn.splice(newIndex, 0, currRow);
              xTable.loadColumn(tableColumn);
              //此处可根据实际需求写
            }
          }
        );
      });
    },

2.列宽改变

在vxe-table标签设置 

:custom-config="{storage: true}"
:column-config="{isCurrent: true, isHover: true, resizable: true}"
@resizable-change="resizableChange"

　　方法调用

//列宽改变
    resizableChange({$rowIndex, column, columnIndex, $columnIndex, $event}) {
      console.log($rowIndex, column, columnIndex, $columnIndex, $event);
    },

　　3.样式设置.

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/style  文档详细描述