ant design vue3.2.9 Table可拖拽行

<template>
	<a-table :dataSource="hpo.dataSource" :columns="hpo.columns" :customRow="customRow">
              <template #bodyCell="{ column, text, record, index }">
                <template v-if="column.dataIndex === 'operation'">
                  <a @click="handlerUp(record, index)">向上</a>
                  <Divider type="vertical" />
                  <a @click="handlerDown(record, index)">向下</a>
                </template>
              </template>
            </a-table>
</template>

<script lang="ts">
 export default defineComponent({
    setup(props, context) {
	    const hpo = reactive({
	        columns: [
	          {
	            title: '操作',
	            dataIndex: 'operation',
	            width: '120px',
	          },
	          {
	            title: 'id',
	            dataIndex: 'id',
	            key: 'id',
	          },
	          {
	            title: 'name',
	            dataIndex: 'name',
	            key: 'name',
	          },
	          {
	            title: 'value',
	            dataIndex: 'value',
	            key: value',
	          },
	        ],
	        dataSource: [],
	      });
			let dataSource_change_1 = null;
			let dataSource_change_2 = null;
			const customRow = (record, index) => {
	        // console.log('customRow:', record, index);
	        return {
	          props: {
	            // draggable: 'true'
	          },
	          style: {
	            cursor: 'pointer',
	          },
	          // 鼠标移入
	          onMouseenter: (event) => {
	            // 兼容IE
	            var ev = event || window.event;
	            ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
	          },
	          // 开始拖拽
	          onDragstart: (event) => {
	            // 兼容IE
	            var ev = event || window.event;
	            // 阻止冒泡
	            ev.stopPropagation();
	            // 得到源目标数据序号
	            hpo_dataSource_change1 = index;
	            console.log(record, index, 'source');
	          },
	          // 拖动元素经过的元素
	          onDragover: (event) => {
	            // 兼容 IE
	            var ev = event || window.event;
	            // 阻止默认行为
	            ev.preventDefault();
	          },
	          // 鼠标松开
	          onDrop: (event) => {
	            // 兼容IE
	            var ev = event || window.event;
	            // 阻止冒泡
	            ev.stopPropagation();
	            // 得到目标数据序号
	            hpo_dataSource_change2 = index;
	            // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
	            [hpo.dataSource[hpo_dataSource_change1], hpo.dataSource[hpo_dataSource_change2]] = [hpo.dataSource[hpo_dataSource_change2], hpo.dataSource[hpo_dataSource_change1]];
	            console.log(record, index, 'target');
	          },
	        };
	      };
	      return {
	      	customRow 
	      }
	}
    })
</script>