zouyu
2026-04-21 7b936dc5e04df96d319e6895fe883cad8ff57dd4
src/views/system/user/index.vue
@@ -48,6 +48,11 @@
          </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" />
@@ -523,6 +528,7 @@
        ghostClass: 'sortable-ghost', // 拖拽占位符样式
        chosenClass: 'sortable-chosen', // 选中行样式
        dragClass: 'sortable-drag', // 拖拽元素样式
        handle: '.drag-handle',
        disabled: this.loading || this.sortSaving,
        // 拖拽结束触发(核心逻辑)
        onEnd: async({ oldIndex, newIndex }) => {
@@ -1000,8 +1006,19 @@
</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;