Vue3+element plus+sortablejs实现table列表拖拽

这篇具有很好参考价值的文章主要介绍了Vue3+element plus+sortablejs实现table列表拖拽。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、安装

npm install sortablejs --save

2、引入

import Sortable from 'sortablejs';

3、使用文章来源地址https://www.toymoban.com/news/detail-733572.html

  • 表格表头必须加row-key,否则会出现排序错乱
  • 完整代码table.vue
<el-table v-loading="loading"
              row-key="id"
              :height="tableHeight"
              ref="tableRef"
              border
              stripe
              size="small"
              :data="receiptDataList"
              :row-class-name="setRowColor"
              show-summary
              :summary-method="getSummaries"
              @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="45" align="center"/>
      <el-table-column
          v-for="(item, index) in tableHeaderList"
          :key="`col_${index}_${mykey}`"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :sortable="item.sortable"
          :show-overflow-tooltip="item.overflow"
          align="center"
      >
        <template #default="{row}" v-if="item.label === '收款编码'">
          <span>{{ row.no }}</span>
        </template>
        <template #default="{row}" v-if="item.label === '箱号'">
          <span>{{ row.caseNum }}</span>
        </template>
         .......
      </el-table-column>
</el-table>
onMounted(() => {
   columnDrop()
   rowDrop()
})
//列拖拽:列拖拽方法实际上就是修改表头数据的值
const mykey = ref(0)
function columnDrop() {
  const wrapperTr  = document.querySelector('.el-table__header-wrapper tr');
  Sortable.create(wrapperTr , {
    animation: 180,
    delay: 0,
    onEnd: evt => {
      // 跳过显示的列数量,如开头我们用了一个多选框
      const empty = 1
      const oldItem = tableHeaderList.value[evt.oldIndex- empty];
      tableHeaderList.value.splice(evt.oldIndex- empty, 1);
      tableHeaderList.value.splice(evt.newIndex- empty, 0, oldItem);
      //防止表头数据改变,但表头未重新渲染
      //在自定义表头的时候,由于是用的v-for循环生成的,因此会给每个循环体一个固定的key,导致数据频繁异步更新时,因为这个key没有变,所以el-table觉得表头数据是没有变化的,因此就只更新了整体表格数据、key值有变化的列的表头。
      mykey.value = Math.floor(Math.random()*1000+1) 
    }
  });
}

//行拖拽:行拖拽方法实际上就是修改this.tableData的值
function rowDrop() {
  // 要侦听拖拽响应的DOM对象
  const tbody = document.querySelector('.el-table__body-wrapper tbody');
  Sortable.create(tbody, {
    // 结束拖拽后的回调函数
    onEnd({newIndex, oldIndex}) {
      console.log('拖动了行,当前序号:' + newIndex);
      const currentRow = receiptDataList.value.splice(oldIndex, 1)[0];
      receiptDataList.value.splice(newIndex, 0, currentRow);
    }
  })
}

到了这里,关于Vue3+element plus+sortablejs实现table列表拖拽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包