vben admin的useTable 增加表格拖拽功能

由于项目vben admin的 vue antd的版本是2.2.8，在看了table的文档之后发现只有用Surely vue才支持封装好的拖拽功能。只有自己动手去实现vben里的useTable的拖拽功能了

在useTable的配置项里面添加customRow的属性，然后定义一个函数：

 定义的dataSource必须用reactive包裹起来，否则在页面不能看到拖拽的变化。

      let source= 0; // 源目标数据序号
      let target= 0; // 目标数据序号
         // Table拖拽
      function customRow(record, index) {
        console.log(record, index); // 这里输出是表格全部的数据
        return {
          props: {
            // draggable: 'true'
          },
          style: {
            cursor: 'pointer',
          },
          // 鼠标移入
          onMouseenter: (event) => {
            // 兼容IE
            let ev = event || window.event;
            ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
          },
          // 开始拖拽
          onDragstart: (event) => {
            // 兼容IE
            let ev = event || window.event;
            // 阻止冒泡
            ev.stopPropagation();
            // 得到源目标数据序号
            source= index;
            console.log(record, index, 'source');
          },
          // 拖动元素经过的元素
          onDragover: (event) => {
            // 兼容 IE
            let ev = event || window.event;
            // 阻止默认行为
            ev.preventDefault();
          },
          // 鼠标松开
          onDrop: (event) => {
            // 兼容IE
            let ev = event || window.event;
            // 阻止冒泡
            ev.stopPropagation();
            // 得到目标数据序号
            target= index;
            // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
            [dataSource[source], dataSource[target]] = [dataSource[target], dataSource[source]];
            console.log(record, index, 'target', source, target);
          },
        };
      }

 然后页面上就可以实现拖拽的功能了，并且可以拿到目标行和源数据行的所有数据和序号