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

Question

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

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：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专家咨询解决方案。

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