Sortable.js是一款优秀的js拖拽库,支持触屏设备和大部分浏览器。不依赖jQuery。支持 AngularJS、React、Vue框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。在此推荐个简单明了的网站www.sortablejs.com/index.html, 安装步骤就不多说了,相信各位大佬都会找百度,有兴趣的也可以研究它的源码github.com/SortableJS/…
废话不多说,代码给各位!!
//需要拖拽的表格
<el-table
ref="rulesTable"
v-loading="automaticLoading"
:data="automaticData"
row-key="prop"
fit
border
height="500"
highlight-current-row
header-row-class-name="table-header"
cell-class-name="table-cell"
:row-class-name="tableRowClassName"
@cell-click="handleCellClick"
@current-change="handleSelectCurrentRow"
>
<el-table-column
label="选择"
prop="ruleStatu"
align="center"
>
<template v-slot="{row}">
<el-checkbox v-model="row.ruleStatu" :checked="row.ruleStatu===1" :false-label="0" :true-label="1" :disabled="sortFlag" @click.native.stop @change="handleRuLeStatu" />
</template>
</el-table-column>
<el-table-column
label="规则"
prop="ruleName"
align="center"
show-overflow-tooltip
/>
<el-table-column
label="值"
prop="ruleValue"
align="center"
show-overflow-tooltip
>
<template v-slot="{row}">
<el-input v-model="row.ruleValue" :disabled="row.ruleValue===null" @click.native.stop />
</template>
</el-table-column>
</el-table>
表格效果图
使用sortable.js就需要先创建sortable,在创建sortable.js前讲一下遇到了一个可能大家都会出现的问题,就是拖拽效果是有,但是拖拽后的顺序其实视图是没有更新的。
这个是拖拽顺序不生效的代码
// 创建sortable
setSort() {
const el = this.$refs.rulesTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
animation: 150,
disabled: this.sortFlag,
onEnd: evt => {
const oldIndex = evt.oldIndex
const newIndex = evt.newIndex
//先删除
const targetRow= this.automaticData.splice(oldIndex,1)[0]
//再添加
this.automaticData.splice(newIndex,0,targetRow)
},
//表格顺序更新
onUpdate: () => {
this.oldRow = this.multipleSelectionStrategy[0]
this.oldAutomaticData = this.automaticData
this.updateRule = true
}
})
},
这个是解决这个问题的代码
setSort() {
const el = this.$refs.rulesTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
animation: 150,
disabled: this.sortFlag,
onEnd: evt => {
const oldIndex = evt.oldIndex
const newIndex = evt.newIndex
const temp = this.automaticData[oldIndex]
if (oldIndex < newIndex) { // 向下移动调整顺序
for (let i = oldIndex; i < newIndex; i++) {
this.automaticData[i] = this.automaticData[i + 1]
}
} else if (oldIndex > newIndex) { // 向上移动时调整顺序
for (let i = oldIndex; i > newIndex; i--) {
this.automaticData[i] = this.automaticData[i - 1]
}
}
this.automaticData[newIndex] = temp
},
onUpdate: () => {
this.oldRow = this.multipleSelectionStrategy[0]
this.oldAutomaticData = this.automaticData
this.updateRule = true
}
})
},
今天的文章关于使用sortable.js让element表格可拖拽效果分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/15176.html