vue项目element ui与sortablejs实现表格列的拖拉拽,并且实现列的动态隐藏显示,功能实现的差不多,但是有bug远程有偿

vue项目element ui与sortablejs实现表格列的拖拉拽,并且实现列的动态隐藏显示,功能已经实现了,就是有个bug,拖动列的时候,表头没有重新渲染,每列的数据是变了的,麻烦远程看看有偿

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 给你找了一篇非常好的博客,你可以看看是否有帮助,链接:vue+element+Sortable实现表格行拖拽功能
  • 除此之外, 这篇博客: vue+elementui+sortablejs实现表格拖拽中的 demo界面 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    在这里插入图片描述

  • 以下回答来自chatgpt:

    对于这个问题,可以按照以下步骤进行解决:

    1. 在要实现表格拖拽的vue文件中,引入SortableJS:
    import Sortable from "sortablejs";
    
    1. 在表格中设置sortable属性为true,并将要拖拽排序的列的prop属性设置为要排序的属性,例如:
    <el-table-column label="排序" :sortable="true" prop="sort">
      <template #default="scope">
        <div class="address_list">
          <el-input-number
            v-model="scope.row.sort"
            :min="1"
            :max="10"
            @change="handleCountChange(scope.row)"  />
        </div>
      </template>
    </el-table-column>
    
    1. 如果需要解绑拖拽排序功能,可以使用Sortable的destroy()方法。例如:
    _this.rootDepart.sortableObj = Sortable.create(el);
    // 销毁排序
    _this.rootDepart.sortableObj.destroy();
    
    1. 如果需要动态隐藏/显示列,可以使用element-ui的table-column组件的visible属性,例如:
    <el-table-column
      :visible="showColumn"
      label="列名"
      prop="property"
    ></el-table-column>
    

    其中,showColumn是用来控制列的显示/隐藏的变量。

    1. 如果遇到问题需要远程修复,可以联系专业的IT技术服务商或IT专家咨询解决方案。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^