sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)
项目需求是要求能对element中 的table进行拖拽行排序
这里用到了sorttable
sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小，但是功能很强大)
安装步骤：
npminstallsortablejs--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)
}
})
},
这样就可以实现基本的行拖拽和列拖拽了
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
