[JavaScript知识库]sortablejs的使用-交换行数据及遇到的问题

一、使用

1. 安装 sortablejs

   npm install sortablejs --save

2. 在需要加排序的页面引入 sortablejs

   import Sortablejs form ‘sortablejs’

3. mounted 函数中初始化一个 sortablejs 实例
   Sortablejs.create(容器, { 配置项 })

import Sortable from 'sortablejs'
mounted() {
    // 初始化函数
    this.initSortable()
}
methods: {
    initSortable() {
        const selector = '.el-table__body-wrapper > table > tbody'
        const el = document.querySelectorAll(selector)[0]
        Sortable.create(el, {
        onMove: evt => {
            const { dragged, related } = evt
        },
        onEnd: evt => {
            this.dragChangeLevel(evt.oldIndex, evt.newIndex)
        },
        filter: '.disabled-drag'
        })
    },
    dragChangeLevel(oldIndex, newIndex) {
        // 调用交换顺序的接口
    }
}

原本以为就这么简单结束了
但是遇到一个严重的问题

二、遇到的问题及解决方法

交换顺序后 会出现前端展示的数据顺序 和 后端返回的顺序不一致的情况
这是什么个原因
在页面用 {{}} 打印出的值也和后端返回的顺序一致，可就是偏偏渲染的时候不一样
先是查询了一下，说应该给 table 的行加上 key 值 加上了

<el-table :row-key="getRowKey"></el-table>

getRowKey(row) {
	return row.id
}

刚开始感觉交换了几次没问题，很开心的以为成功了，可是当我重复很多次之后，还是会出现这个问题
后面想了一个解决办法是在成功后 调用获取列表页的接口时 先清空 table 的数据 然后再给他赋值

// 获取列表页
async getDataLevel() {
    await getDataLevelList({ current: 1, size: 10 }).then((res) => {
        if (res.code === '000000') {
            this.dataList = []
            var list = res?.data?.records
            this.$nextTick(() => {
                this.dataList = list
            })
        }
    })
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖