Element UI table顺序拖动方式是什么
今天小编给大家分享一下Element UI table顺序拖动方式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
Element UI table 顺序拖动
使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});官网：
[1] Sortable.js官网配置项说明等
[2] Sortable更多使用示例
基本使用
1、安装
npm install sortablejs --save
2、引用
import Sortable from 'sortablejs'
3、使用
<el-table id="table" :data="list" row-key="id" > <el-table-column prop="name" label="称" width="180" /> <el-table-column label="操作"> <template slot-scope="scope"> <el-button class="handle" size="mini" ><i class="el-icon-rank" /> 移动</el-button> </template> </el-table-column> </el-table>
<script>
// 引用 Sortable
import Sortable from 'sortablejs'
export default {
data() {
return {
list: []
}
},
mounted() {
this.rowDrop();
},
methods: {
//行拖拽,排序方法
rowDrop() {
// 获取对象
const el = document.querySelector('#ability-table .el-table__body-wrapper tbody')
const self = this
// 配置
var ops = {
handle: ".handle",
onEnd({ newIndex, oldIndex }) {
self.list.splice(newIndex, 0, self.list.splice(oldIndex, 1)[0])
const newArray = self.list.slice(0)
newArray.forEach((value, index) => {
value.orderNum = index + 1 //序号为index+1
self.$set(newArray, index, value)
self.list= [] //
self.$nextTick(() => {
self.list= newArray ? newArray : []
})
}
Sortable.create(el,ops)
},
}
</script>说明：
orderNum：为排序号
handle： 使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
Array.splice() 方法有三个参数：
index：规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany：要删除的项目数量。如果设置为 0，则不会删除项目。item1, ..., itemX：向数组添加的新项目。
注意：
newArray = Array.splice(0): 表示将原数组赋给新数组，并将原数组清空。
要在el-table渲染后调用 this.rowDrop(); 方法
组件绑定是根据Id绑定的：document.querySelector('#ability-table .el-table__body-wrapper tbody')，要注意父组件Id和子组件Id不要重名，否则会优先绑定到父组件对应的Id元素。
element关于table拖拽排序问题
最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法
//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
<el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
//设置sortable属性时出现排序按钮
<el-table-column prop="ID" label="座号" sortable>
</el-table>但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能
sortablejs GitHub地址
//sortablejs GitHub地址 https://github.com/SortableJS/Sortable#readme
//安装sortable.js
Install with NPM:
$ npm install sortablejs --save
//在组件内引入
import Sortable from 'sortablejs'
//为需要拖拽排序的表格添加ref属性
<el-table ref="dragTable">
//在数据渲染完毕添加拖拽事件
created(){
this.getBanner()
},
methods:{
async getBanner(val){
await apiGetBanner().then((res)=>{
this.bannerTable = res.data.data;
})
this.oldList = this.bannerTable.map(v => v.id);
this.newList = this.oldList.slice();
this.$nextTick(() => {
this.setSort() //数据渲染完毕执行方法
})
}
setSort() {
const el = this.$refs.dragTable.$el.querySelectorAll(
'.el-table__body-wrapper > table > tbody'
)[0];
this.sortable = Sortable.create(el, {
// Class name for the drop placeholder,
ghostClass: 'sortable-ghost',
setData: function(dataTransfer) {
dataTransfer.setData('Text', '')
},
//拖拽结束执行,evt执向拖拽的参数
onEnd: evt => {
//判断是否重新排序
if(evt.oldIndex !== evt.newIndex){
let data = {
id:this.bannerTable[evt.oldIndex].id,
banner_order:evt.newIndex
}
//数据提交失败则恢复旧的排序
apiPutBanner(data).catch(()=>{
const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
this.bannerTable.splice(evt.newIndex, 0, targetRow);
})
}
}
})
}
}如果需要列拖拽的话，可以参考下面的代码，和上面是一样的原理，在这里我就不赘述了
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
}
})
},
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex]
this.dropCol.splice(evt.oldIndex, 1)
this.dropCol.splice(evt.newIndex, 0, oldItem)
}
})
}以上就是“Element UI table顺序拖动方式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论