sortablejs拖拽

最新推荐文章于 2024-10-24 16:29:42 发布

aiXianRen

最新推荐文章于 2024-10-24 16:29:42 发布

阅读量306

点赞数

分类专栏： vue小功能文章标签： vue.js html5 javascript

本文链接：https://blog.youkuaiyun.com/aiXianRen/article/details/120029117

版权

vue小功能专栏收录该内容

2 篇文章

订阅专栏

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="showOrder" label="序号"></el-table-column>
    </el-table>
  </div>
</template>

<script>
// 下载 npm install sortablejs --save
import Sortable from 'sortablejs'
export default {
  name: 'XTable',
  data () {
    return {
      tableData: [
        { id: 1, showOrder: '1111' },
        { id: 2, showOrder: '2222' },
        { id: 3, showOrder: '3333' },
        { id: 4, showOrder: '4444' }
      ]
    }
  },
  mounted () {
    this.initSortable() // 需要调用
  },
  methods: {
    // 初始化拖拽
    initSortable () {
      let data = [...this.tableData]
//  注意点：如果是嵌套的拖拽，如抽屉中的。需要通过 this.$refs.xxx.$el;获取dom元素
      const el = document.querySelector('.el-table__body-wrapper tbody')
      //创建拖拽对象
      Sortable.create(el, {
        sort: true, //是否可进行拖拽排序
        animation: 150,
        // delay: 1000, // 拖拽延时生效
        //拖拽完成,对数据进行修改
        onEnd: ({ newIndex, oldIndex }) => {
          const oldIndexVal = data[oldIndex]
          const newIndexVal = data[newIndex]
          data.splice(oldIndex, 1, newIndexVal)
          data.splice(newIndex, 1, oldIndexVal)
        }
      })
    }
  }
}
</script>