ant design vue实现表格拖拽排序sortTableJS

首先需要下载sortTableJS，配置项中文文档地址如下

http://www.sortablejs.com/options.html

下包 和 引入

npm install sortable.js --save import Sortable from 'sortablejs'

html代码：

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 = thisSortable.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;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！