| | |
| | | </div> |
| | | <el-col> |
| | | <el-table ref="dragTable" v-loading="loading" row-key="userId" :data="userList" :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border> |
| | | <el-table-column label="拖拽" align="center" width="60"> |
| | | <template slot-scope="scope"> |
| | | <i class="el-icon-rank drag-handle" :data-user-id="scope.row.userId"></i> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="序号" align="center" type="index" /> |
| | | <el-table-column label="姓名" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" /> |
| | | <el-table-column label="账号" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" /> |
| | |
| | | ghostClass: 'sortable-ghost', // 拖拽占位符样式 |
| | | chosenClass: 'sortable-chosen', // 选中行样式 |
| | | dragClass: 'sortable-drag', // 拖拽元素样式 |
| | | handle: '.drag-handle', |
| | | disabled: this.loading || this.sortSaving, |
| | | // 拖拽结束触发(核心逻辑) |
| | | onEnd: async({ oldIndex, newIndex }) => { |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | :deep(.el-table__body-wrapper tbody tr) { |
| | | cursor: move; |
| | | :deep(.drag-handle) { |
| | | cursor: grab; |
| | | color: #909399; |
| | | font-size: 16px; |
| | | display: inline-block; |
| | | user-select: none; |
| | | } |
| | | :deep(.drag-handle:hover) { |
| | | color: #409EFF; |
| | | cursor: grab; |
| | | } |
| | | :deep(.drag-handle:active) { |
| | | cursor: grabbing; |
| | | } |
| | | :deep(.sortable-ghost) { |
| | | opacity: 0.8; |