Sortable.js +Vue+ElementUi 中的elTable 拖动排序功能实现

wangmingyin

已于 2023-08-26 14:20:47 修改

阅读量146

点赞数 1

文章标签： elementui vue.js javascript

于 2023-08-23 11:52:12 首次发布

本文链接：https://blog.csdn.net/wangmingyin/article/details/132448853

版权

一、下载 js

本例子中引用的是 Sortable.js 可以百度自行下载官方有例子程序好学。

引入页面

二、实战

三、上代码

 rowDrop() {
                    var _this = this;
                    const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
                    this.sortable = Sortable.create(el, {
                        ghostClass: 'sortable-ghost',
                        setData: function (dataTransfer) {
                            dataTransfer.setData('Text', '')
                        },
                        onEnd: evt => {
                            const targetRow = this.MemberListData.splice(evt.oldIndex, 1)[0];
                            this.MemberListData.splice(evt.newIndex, 0, targetRow);
                            let arr = this.MemberListData.slice(0);
                            this.MemberListData = [];
                            this.$nextTick(() => {
                                this.MemberListData = arr.slice(0);
                                this.UpdateMemberIndex(this.MemberListData);
                            })
                        }
                    });

 UpdateMemberIndex(lst) {
                    
                    var ids = "";
                    for (var i = 0; i < lst.length; i++) {
                        ids += lst[i].GUID+","
                    }
                    axios({
                        method: "post",
                        url: "Member_ChangeIndex.ashx",
                        data: qs.stringify({
                            GUIDS: ids,
                            CurrentOrgID: this.CurrentOrgID
                        })
                    }).then(response => {
                        if (response.data == "ReLogin") {
                            this.$message.error('你的登录已过期，请重新登录！');
                        }
                        else if (response.data == "Success") {
                            this.$message({ type: 'success', message: '更新成功!' });
                        }
                        else {
                            this.$message({ type: 'info', message: response.data });
                        }
                    }).catch(error => {
                        this.$message({ type: 'info', message: error });
                    });
                },