1.安装插件
npm install sortablejs --save
2.引入
import Sortable from 'sortablejs'
3.html表格结构(要绑定唯一的值row-key,不然会出错)
<template>
<div>
<el-table :data="state.tableView" row-key="id" style="width: 100%">
<el-table-column prop="sortNo" label="Sort" width="90" />
<el-table-column prop="date" label="Date" width="120" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="address" label="Address" />
</el-table>
</div>
</template>
4.js代码
<script lang="ts" setup>
import { reactive, onMounted, nextTick } from 'vue'
import Sortable from 'sortablejs'
const state = reactive({
tableView: [
{
id: 1,
sortNo: 2,
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
id: 2,
sortNo: 3,
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
id: 3,
sortNo: 1,
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
id: 4,
sortNo: 4,
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}
]
})
onMounted(async () => {
init()
nextTick(() => {
initSortTable()
})
})
//渲染页面的接口
const init = async () => {
// 根据sortNo升序排列
state.tableView.sort((a, b) => {
return a.sortNo - b.sortNo
})
}
// 初始化拖拽表格
const initSortTable = () => {
// 获取 tbody 节点
const tbody = document.querySelector('.el-table__body-wrapper tbody')
// 拖拽排序
Sortable.create(tbody, {
delay: 0,
animation: 300, // 拖拽延时,效果更好看
onEnd: async (evt) => {
state.tableView.splice(evt.newIndex, 0, state.tableView.splice(evt.oldIndex, 1)[0])
state.tableView.forEach((item, index) => {
item.sortNo = index + 1 // 重新给sortNo赋值
})
// 接口(param).then((res) => {})
}
})
}
</script>
运行效果