js + vue3 + vxe-table + sortablejs制作表格，具有可拖动功能，给表格的最后一列设置fixed="right" 属性使其固定但是当拖到行时其他行变动了而最后一列没变改怎么解决

在Vue.js 3中，结合Vxe-Table、SortableJS以及Vue Sortable Table插件，你可以创建一个支持拖动排序和列固定的交互式表格。以下是步骤和思路：

1. 安装依赖：
- 首先安装`@vux/easy-table`（Vxe-Table组件库）和`vue-sortable-table`：

     npm install @vux/easy-table vue-sortable-table sortablejs

2. 引入组件并配置：
在你的组件文件中引入VxeTable和SortableTable，并配置SortableJS用于处理排序：

   <template>
     <div>
       <vxe-table :columns="columns" :data="tableData" ref="vxeTable" :sortable="{ enable: true }"></vxe-table>
     </div>
   </template>

   <script>
   import { VxeTable } from '@vux/easy-table';
   import { VueSortableTable } from 'vue-sortable-table';

   export default {
     components: {
       VxeTable,
       VueSortableTable,
     },
     data() {
       return {
         columns: ...,
         tableData: ...,
         // 添加SortableJS实例和配置
         sortableOptions: {
           onEnd: this.handleSortEnd,
         },
       };
     },
     methods: {
       handleSortEnd({ oldIndex, newIndex }) {
         // 根据SortableJS提供的信息更新数据的排列顺序
         this.tableData = this.tableData.sort((a, b) => a[this.columns[newIndex].field] - b[this.columns[newIndex].field]);
       }
     },
   };
   </script>

3. 设置最后一列固定：
Vxe-Table本身不直接支持CSS `fixed`属性，但你可以通过添加CSS来实现：

   .vxe-table__body-wrap {
     overflow-x: auto;
   }

   .vxe-table__body-wrap > tbody tr:last-child td:nth-child(-n+-{{ columns.length - 1 }}):not(:last-child) {
     position: relative;
   }

   .vxe-table__body-wrap > tbody tr:last-child td:last-child {
     position: absolute;
     right: 0;
     width: calc(100% - ({{ columns.length - 1 }} * 100%) - 4px);
     /* 如果需要滚动条 */
     overflow-x: scroll;
   }

当你尝试拖动行时，如果发现最后一列未随着一起移动，可能是由于CSS覆盖问题或者其他逻辑冲突。检查上述CSS是否完全覆盖了默认样式，并确保在`handleSortEnd`方法中正确地调整了所有列的数据顺序。