sortable.js 插件拖拽后视图出错解决

问题说明:

vue+element-ui+sortable实现el-table拖拽功能

结果拖拽后发现数据更新了,视图没更新

行拖拽代码:

        /**
         * 行拖拽
         */
        rowDrop () {
            // 此时找到的元素是要拖拽元素的父容器
            const tbody = document.querySelector('.el-table__body-wrapper tbody')
            const _this = this
            this.dragObj =  Sortable.create(tbody, {
                //  指定父元素下可被拖拽的子元素
                draggable: ".el-table__row",
                onEnd ({ newIndex, oldIndex }) {
                    const currRow = _this.projectList.splice(oldIndex, 1)[0]
                    _this.projectList.splice(newIndex, 0, currRow)
                }
            })
            // 初始无法拖动
            this.dragObj.option('disabled', true)

        },

解决方法:

一定要指定row-key为唯一字段!!!

我查到的很多博客都告诉我加入row-key, 示例: row-key="id"

但是朋友们注意了,这个id只要是唯一标识列表数据的一个字段就可以

我们的常用命名是id

但是我这次返回的数据中没有id字段就尴尬了

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值