sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)

项目需求是要求能对element中 的table进行拖拽行排序

这里用到了sorttable

sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)

安装步骤：

npm install sortablejs --save

在.vue中的js部分(需要用到sorttable的vue文件中)引入  也可以 在main.js中引入注册到vue的根实例中

import sortable from 'sortablejs'

html 部分

border

width="100%"

row-key="id"

align="left"

v-show="showdictitem">

默认

width="60px"

label="序号"

type="index">

:key="`col_${index}`"

:prop="dropcol[index].prop"

:label="item.label">

size="mini"

@click="handleedit(scope.$index, scope.row)">修改

确定要删除当前内容？

size="mini"

type="danger"

slot="reference">删除

size="mini"

type="primary"

@click="handledefault(scope.$index, scope.row)" v-show="scope.row.defaultvalue === 0">默认

size="mini"

type="primary"

@click="handledefault(scope.$index, scope.row)" v-show="scope.row.defaultvalue === 1">取消

data 部分

col: [

{

label: '值',

prop: 'datakey'

},

{

label: '显示名',

prop: 'datavalue'

}

],

dropcol: [

{

label: '值',

prop: 'datakey'

},

{

label: '显示名',

prop: 'datavalue'

}

],

tabledata: [],

methos

//行拖拽

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)

}

})

},

这样就可以实现基本的行拖拽和列拖拽了

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！