首先需要下载sortTableJS,配置项中文文档地址如下
http://www.sortablejs.com/options.html
下包 和 引入
npm install sortable.js --save
import Sortable from 'sortablejs'
html代码:
<a-modal
:visible="visible"
:v-if="visible"
:title="title"
cancelText="返回"
@ok="handleOk"
@cancel="handleCancel"
:forceRender="true"
>
<div ref="Scheduling">
<a-table
ref="table"
:scroll="{ y: true }"
bordered
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnTitle: '显示' }"
rowKey="id"
:columns="columns"
size="small"
:data-source="tableData"
:pagination="false"
>
<template v-slot:order="t">
<div class="dragSort">{{ t }}</div>
</template>
</a-table>
</div>
</a-modal>
js代码:
data() {
return {
tableData: [
{
id: '1',
menu: '1',
order: '',
},
{
id: '2',
menu: '2',
order: '',
},
{
id: '3',
menu: '3',
order: '',
},
],
columns: [
{
title: '菜单名',
dataIndex: 'menu',
key: 'menu',
align: 'center',
},
{
title: '拖动调整顺序',
dataIndex: 'order',
key: 'order',
align: 'center',
scopedSlots: { customRender: 'order' },
},
],
}
},
mounted() {
this.$nextTick(() => {
this.rowDrop()
})
},
methods: {
//行拖拽
rowDrop() {
const tbody = this.$refs.Scheduling.querySelectorAll('.ant-table-tbody') // 元素选择器名称根据实际内容替换
console.log(tbody[0])
const _this = this
Sortable.create(tbody[0], {
sort: true,
// fallbackClass: true,
animation: 150, //动画
handle: '.dragSort', //指定哪个类名的可以拖动
//handle: '.ant-table-tbody', //使用这个类名则是整行任意位置都可以拖动
//chosenClass: 'sortable-ghost',被选中项的css 类名
//dragClass: 'sortable-drag',正在被拖拽中的css类名
group: { name: 'name', pull: true, put: true },
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
},
})
},
},
css代码:(拖动的时候效果不是很明显,设置了被选中和被拖动时的类名但是没有起效果也不知道怎么回事)
.dragSort {
cursor: pointer;
}