vue2实现element表格拖拽功能
2023-12-13 19:02:09
1. 安装sortablejs
npm install sortablejs --save
安装完成之后需要在你使用界面中引入即可
import Sortable from 'sortablejs'
2. 表格中使用sortablejs
<el-table
ref="sortTable"
:data="tableData"
:loading="loading"
@row-click="handleClick"
style="padding: 12px 12px 0 12px"
row-key="agencyName"
>
<!-- 表格主体部分 -->
<template>
<el-table-column
align="left"
label="序号"
type="index"
width="80"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
{{
scope.$index + 1 + (listQuery.pageNum - 1) * listQuery.pageSize
}}
</template>
</el-table-column>
<el-table-column
prop="agencyName"
label="单位名称"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="province"
label="省份"
:show-overflow-tooltip="true"
/>
<el-table-column
prop="creatTime"
label="创建时间"
:show-overflow-tooltip="true"
/>
</template>
</el-table>
其中需要给table增加ref和 row-key,row-key的值需要为唯一值
3. 表格排序
sortTable() {
let _this=this;
const tbody = _this.$refs.sortTable.$el.querySelectorAll(
".el-table__body-wrapper > table > tbody"
)[0];
Sortable.create(tbody, {
animation: 300,
onEnd: e => {
console.log(e)
//e.oldIndex为拖动一行原来的位置,e.newIndex为拖动后新的位置
const targetRow = _this.tableData.splice(e.oldIndex, 1)[0];
_this.tableData.splice(e.newIndex, 0, targetRow);
//拖动行的数据
let dragId = _this.tableData[e.newIndex].agencyName;
console.log(_this.tableData)
}
});
},
然后在表格列表获取之后调用该函数就可以了。
4. 方法介绍
onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
console.log('onAdd.foo:', [evt.item, evt.from])
},
onUpdate: function (evt) { // 拖拽更新节点位置发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from])
},
onRemove: function (evt) { // 删除拖拽节点的时候促发该事件
console.log('onRemove.foo:', [evt.item, evt.from])
},
onStart: function (evt) { // 开始拖拽出发该函数
console.log('onStart.foo:', [evt.item, evt.from])
},
onSort: function (evt) { // 发生排序发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from])
},
onEnd ({ newIndex, oldIndex }) { // 结束拖拽
let currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
}
文章来源:https://blog.csdn.net/weixin_42878211/article/details/134978605
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!