Vue3 使用ant design vue table组件实现自定义拖拽效果

代码运行效果图

 <template>
    <!-- 使用 customRow 方法设置行属性 -->
    <a-table
        :columns="staffColumnsSort"
        :dataSource="dataSource"
        :rowKey="record => record.staffId"
        :customRow="isSort ? customRow : null"
      >
        <!-- 拖拽icon -->
        <template #sort>
          <HolderOutlined />
        </template>
      </a-table>
</template>

<script>
import { ref } from 'vue'
import { staffColumnsSort} from '../../columns'
import { HolderOutlined } from '@ant-design/icons-vue'
export default{
    components: {
        HolderOutlined
      },
    setup(){
        const sourceObj = ref({}) //源对象
        const targetObj = ref({}) //目标对象
        const dataSource = ref([])//列表数据
        const sortInfo = ref([])//整理后发给后台的数组
        const isSort = ref(true)//是否在排序状态下
        //移除拖拽样式方法
        const removeStyle = () => {
          document.getElementsByClassName('ant-table-tbody').forEach(parent => {
                parent.getElementsByTagName('tr').forEach(child => {
                  child.removeAttribute('style')
                })
              })
        }
        const customRow = (record, index) => {
          return {
            style: {
              cursor: 'grab'
            },
            // 鼠标移入
            onMouseenter: event => {
            // 兼容IE
            var ev = event || window.event
            ev.target.draggable = true
            },
            // 开始拖拽
            onDragstart: event => {
              // 兼容IE
              var ev = event || window.event
              // 阻止冒泡
              ev.stopPropagation()
              // 得到源目标数据
              sourceObj.value = record
            },
            // 拖动元素经过的元素
            onDragover: event => {
              // 兼容 IE
              var ev = event || window.event
              // 阻止默认行为
              ev.preventDefault()
              console.log('ant-table-tbody元素个数', document.getElementsByClassName('ant-table-tbody'))
              console.log('拖动元素经过的元素索引', index)
              console.log(
            '表格子元素',
                document.getElementsByClassName('ant-table-tbody')[0].getElementsByTagName('tr')[index]
              )

               //表格右侧操作栏使用了fixed固定定位，因此ant-table-tbody有两个
          document.getElementsByClassName('ant-table-tbody').forEach(parent => {
            parent.getElementsByTagName('tr').forEach((item, i) => {
              if (i === index) {
                item.style.borderBottom = '2px solid #1677ff'
              } else {
                item.removeAttribute('style')
              }
            })
          })
        },
        // 鼠标松开
        onDrop: event => {
          // 兼容IE
          var ev = event || window.event
          // 阻止冒泡
          ev.stopPropagation()
          // 得到目标数据
          targetObj.value = record
          console.log('源数据', sourceObj.value)
          console.log('目标数据', targetObj.value)

          const newArr = dataSource.value

          const source = newArr.findIndex(item => item.staffId ==sourceObj.value.staffId)

          const target = newArr.findIndex(item => item.staffId ==targetObj.value.staffId)

          newArr.splice(source, 1)
          newArr.splice(target, 0, sourceObj.value)

          sortInfo.value = []
          newArr.forEach((item, index) => {
            sortInfo.value.push({
              staffId: item.staffId,
              sortIndex: index
            })
          })
          //松开鼠标后，清除底部拖拽样式
          removeStyle()
        },
        //鼠标移出
        onMouseleave: event => {
          // 兼容IE
          var ev = event || window.event
          //鼠标移出拖拽范围禁止拖拽并清除拖拽效果
          ev.target.draggable = false
          removeStyle()
         
        }
      }
    } 

    return {
        sourceObj, 
        targetObj,
        dataSource,
        sortInfo,
        removeStyle,
        customRow,
        isSort  
        }
    }
}
</script>

//columns.js
export const staffColumnsSort = [
  {
    title: '',
    dataIndex: 'sort',
    key: 'sort',
    align: 'left',
    width: 92,
    slots: { customRender: 'sort' }
  },
  {
    title: '序号',
    dataIndex: 'id1',
    key: 'id1',
    align: 'left',
    width: 117,
    slots: { customRender: 'id1' }
  },
  {
    title: '姓名',
    dataIndex: 'staffName',
    key: 'staffName',
    align: 'left',
    slots: { customRender: 'staffName' },
    ellipsis: true,
    width: 225
  },
  {
    title: '账号',
    dataIndex: 'mobile',
    key: 'mobile',
    align: 'left',
    ellipsis: true,
    slots: { customRender: 'mobile' },
    width: 174
  },
  {
    title: '所属组织',
    dataIndex: 'departmentName',
    key: 'departmentName',
    align: 'left',
    ellipsis: true,
    slots: { customRender: 'departmentName' },
    width: 172
  },
  {
    title: '指纹录入',
    dataIndex: 'fingerprintEntry',
    key: 'fingerprintEntry',
    align: 'left',
    width: 144,
    ellipsis: true,
    slots: { customRender: 'fingerprintEntry' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    slots: { customRender: 'action' },
    fixed: 'right',
    width: 124
  }
]