sortablejs拖拽

sortablejs拖拽<template><div><el-table:data=”tableData”><el-table-columnprop=”showOrder”label=”序号”></el-table-column></el-table></div></template><script>//下载npminstallsave-devs…

<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>

今天的文章sortablejs拖拽分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9253.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注