<template>
<el-table
ref="elTable"
class="tables"
size="mini"
:data="tableData"
style="width: 100%"
:row-key="tableId"
>
<el-table-column label="序号" width="40" align="center" type="index" key="">
<template slot-scope="scope">
<div type="text" class="drag_btn">
{{ getIndex(scope.$index) }}
</div>
</template>
</el-table-column>
<el-table-column
v-for="item in tableColConfig"
:key="item.name"
:prop="item.name"
:label="item.label"
>
<!-- 如果存在 slotName 属性,则加入动态插槽 -->
<template #default="scope">
<template v-if="item.slotName">
<slot :name="item.slotName" :row="scope.row"></slot>
</template>
<template v-else>
<span>{{ scope.row[item.name] }}</span>
</template>
</template>
</el-table-column>
<template slot="empty">
<EmptyTable :title="emptyTitle" :custom-height="154" />
</template>
</el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'DragTable',
props: {
// 实际显示的表格数据
tableData: {
type: Array,
default: () => []
},
// 配置表格的数据
tableColConfig: {
type: Array,
default: () => []
},
// tableId
tableId: {
type: String,
default: 'table1'
},
emptyTitle: {
type: String,
default: '暂无数据'
}
},
data() {
return {
isShowIndex: true
}
},
mounted() {
// 获取el-table DOM
const el = document.querySelector('.tables .el-table__body-wrapper tbody')
new Sortable(el, {
animation: 150,
ghostClass: 'blue-background-class',
handle: '.drag_btn', // 如果需要点击某个图标拖拽的话需要吧那个图标的class写在这里
// 写完以上部分就已经可以实现基本的拖拽功能了,以下是拓展
//始拖拽事件
onEnd: function (/**Event*/ evt) {
let newIndex = evt.newIndex // 排序后的索引位置
let oldIndex = evt.oldIndex // 排序前的索引位置
var itemEl = evt.item // 拖拽 HTMLElement
evt.to // 目标表
evt.from // 上一个列表
evt.oldIndex // 元素在旧父级中的旧索引
evt.newIndex // 元素在新父级中的新索引
evt.clone // 克隆元件
evt.pullMode // 当项目在另一个可排序表中时:`“clone”`如果克隆,`true`如果移动
const El = document.querySelectorAll('.drag_btn')
El[evt.oldIndex].innerHTML = evt.oldIndex + 1
El[evt.newIndex].innerHTML = evt.newIndex + 1
},
//点击选中元素事件
onChoose: function (/**Event*/ evt) {},
//取消选中事件
onUnchoose: function (/**Event*/ evt) {}
})
},
methods: {
getIndex(v) {
return v + 1
}
}
}
</script>
<style lang="scss" scoped>
.drag_btn:hover{
cursor: move;
}
</style>
sortablejs 瞎写写
最新推荐文章于 2024-09-05 16:55:11 发布