<template><el-table :data="list"><el-table-column prop="name" label="名称" /><el-table-column prop="url" label="链接" /><el-table-column prop="description" label="描述" /></el-table></template><script>export default ({data(){return{list:[],}},methods:{// 获取数据列表getlist(){this.list = [{name:'百度',url:'',description:'baidu'},{name:'腾讯网',url:'',description:'tencent'},{name:'新浪微博',url:'/',description:'weibo'},{name:'今日头条',url:'/',description:'bytedance'},{name:'哔哩哔哩',url:'/',description:'bilibili'}]},// 行拖拽rowDrop() {const _this = this// 目标元素let target = document.querySelector('.el-table__body-wrapper tbody');console.log("target.childElementCount",target.childElementCount)for (let i = 0; i < target.childElementCount; i++) {const child = target.children[i]child.draggable = truechild.ondragstart = function(event) {console.log("start111111", i);event.dataTransfer.setData('index', i);}child.ondragover = function(event){event.preventDefault()}child.ondrop = function(event) {event.preventDefault();event.stopPropagation()let startIndex = parseInt(event.dataTransfer.getData('index'))let currentIndex = parseInt(i)console.log("start", startIndex)console.log("drop", currentIndex)if (startIndex - currentIndex > 0) {console.log("要拖拽的元素的索引 大于 当前位置的元素的索引")_this.list.splice(currentIndex, 0, _this.list[startIndex])console.log("删除" + startIndex + 1)_this.list.splice(startIndex + 1, 1)_this.is_table_sort++} else if (startIndex - currentIndex < 0) {console.log("要拖拽的元素的索引 小于 当前位置的元素的索引")_this.list.splice(currentIndex + 1, 0, _this.list[startIndex])_this.list.splice(startIndex, 1)_this.is_table_sort++} else {console.log("什么也不用做");}}child.ondragend = function() {console.log('child' + i + '拖拽结束');// _this.rowDrop()}}},},updated(){//如果是通过ajax加载的数据需要用该方法/*this.$nextTick(()=>{this.rowDrop()})*/},mounted: function () {//如果不是通过ajax加载的数据需要用该方法this.$nextTick(()=>{this.rowDrop()})},created(){this.getlist()},})</script>
