Vue Element Sortablejs实现表格列的拖拽案例详解

1. css:    dragTable.css

@charset "UTF-8";
 
.w-table{
  height: 100%;
  width: 100%;
  float: left;
}
/* 拖动过程中，鼠标显示样式 */
.w-table_moving .el-table th .thead-cell{
  cursor: move !important;
}
.w-table_moving .el-table__fixed{
  cursor: not-allowed;
}
.w-table .thead-cell{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-height: 23px;
  vertical-align: middle;
  overflow: initial;
  position: relative;
}

2. 封装组件：  dragTable.vue

3. 调用封装组件

到此这篇关于Vue Element Sortablejs实现表格列的拖拽案例详解的文章就介绍到这了,更多相关Vue Element Sortablejs实现表格列的拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！