Vue3+vxe-table实现树形表格同级之间的拖拽

Vue3+vxe-table实现树形表格拖拽

效果展示

拖拽拦截

代码

<vxe-grid ref="vxeGridTable" v-bind="gridOptions" class="vxe-gridTable" @row-dragend="rowDragend">
  <template #deptSum_default="{ row }">
    <span @click="jumpToUser(row)" class="link-type">{{ row.deptSum }}</span>
  </template>
  <template #operation_default="{ row }">
    <div class="operation">
      <el-button
        link
        type="primary"
        icon="Edit"
        @click="handleUpdate(row)"
      ></el-button>
      <el-button
        link
        type="primary"
        @click="handleAdd(row)"
        v-if="computedLevel(row)"
        >新增</el-button>
      <el-button
        v-show="row.parentId != 0"
        link
        type="primary"
        @click="handleDelete(row)"
        >删除</el-button>
    </div>
  </template>
  <template #empty>
    暂无数据
  </template>
</vxe-grid>

const gridOptions = ref({
  treeConfig: {
    transform: true,
    rowField: 'deptId',
    parentField: 'parentId',
    childrenField: 'children',
    expandAll: true
  },
  showOverflow: true,
  height: 650,
  align: 'center',
  round: true,
  rowConfig: {
    drag: true
  },
  rowDragConfig: {
    isPeerDrag: true,
    // trigger: 'row',
    showGuidesStatus: true,
    async dragEndMethod({ newRow, oldRow, dragRow, dragPos, dragToChild }) {
      let flag = false
      const type = await ElMessage({
        title: '提示',
        message: '是否确认调整顺序？',
        cancelButtonText: '返回',
        confirmButtonText: '确认',
        type: 'info'
      })
      if (type === 'confirm') {
        flag = true
      } else {
        ElMessage({
          type: 'success',
          message: '已取消该操作'
        })
        flag = false
      }
      return flag
    }
  },
  columnConfig: {
    width: '20%'
  },
  columns: [
    { field: 'deptName', title: '部门名称', treeNode: true, dragSort: true },
    { field: 'leaderName', title: '负责人' },
    { field: 'deptSum', title: '人数', slots: { default: 'deptSum_default' } },
    { field: 'deptTime', title: '成立时间' },
    { title: '操作', slots: { default: 'operation_default' } }
  ],
  data: []
})

// 拖拽结束
const rowDragend = ({ newRow, oldRow, dragRow, dragPos, dragToChild }) => {
  const children = proxy.$refs.vxeGridTable.getTreeParentRow(oldRow).children
  changeOrder(children)
    .then(res => {
      if (res.code) {
        proxy.$modal.msgSuccess('成功')
      } else {
        proxy.$modal.msgError('失败')
      }
    })
    .finally(() => {
      getList()
    })
}