解决sortablejs+el-table表格内限制回撤和拖拽回撤失败问题

应用场景:

table内同一类型可拖拽,不支持不同类型拖拽(主演可拖拽交换位置,非主演和主演不可交换位置),类型不同拖拽效果需还原,试了好几次el-table数据更新了,但是表格样式和数据不能及时保持一致,查阅了各位coder的经验,经过综合,实现了效果...
复制代码
   <el-table
                v-if="moviePersonList"
                ref="tableStar"
                :data="moviePersonList"
                drag="true"
                stripe
                border
                class="table-bottom-bg tableStar"
                max-height="500"
            >
                <el-table-column
                    align="center"
                    prop="orderNum"
                    width="50px"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="personNameCN"
                    label="中文名"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="personNameEN"
                    label="外文名"
                ></el-table-column>
                <el-table-column
                    prop="chief"
                    label="主演"
                ></el-table-column>
                <el-table-column
                    prop="avatar"
                    label="角色头像"
                ></el-table-column>
                <el-table-column
                    prop="descriptionCn"
                    label="中文"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="descriptionEn"
                    label="英文"
                ></el-table-column>
                <el-table-column
                    align="center"
                    prop="person"
                    label="人物"
                >
                </el-table-column>
                <el-table-column label="操作" width="400px;">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-edit"
                            plain
                            >编辑</el-button
                        >
                        <el-button
                            type="warning"
                            size="mini"
                            icon="el-icon-s-custom"
                            :disabled="!editable"
                            v-show="
                                item.graphyId === 1 &&
                                scope.row.chie === '否'
                            "
                            >设为主演</el-button
                        >
                        <el-button
                            size="mini"
                            icon="el-icon-error"
                            :disabled="!editable"
                            v-show="
                                item.graphyId === 1 &&
                                scope.row.chie === '是'
                            "
                            >设为非主演</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

方法部分

复制代码
    rowDrop() {
        let tbody = undefined  //此处兼容火狐浏览器拖动打开新页面问题
        tbody = this.$refs.tableStar[0].$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]
        const _this = this
        let moviePersonList = _this.moviePersonList.length > 0 ? _this.moviePersonList : []
   
        Sortable.create(tbody, {
            draggable: '.el-table__row',
            forceFallback: false, 
            onEnd(evt) {
            const newIndex = evt.newIndex
            const oldIndex = evt.oldIndex
            const tab = JSON.parse(JSON.stringify(moviePersonList))
                if (tab[oldIndex].chie !== tab[newIndex].chie) {
                    // 复原拖拽之前的 数据
                    const item = tab.splice(newIndex, 1)[0];
                    tab.splice(oldIndex, 0, item);
                    // 复原拖拽之前的 dom
                    const tagName = evt.item.tagName;
                    const items = evt.from.getElementsByTagName(tagName);
                    if (evt.oldIndex > evt.newIndex) {
                    evt.from.insertBefore(evt.item, items[evt.oldIndex+1]);
                    } else {
                    evt.from.insertBefore(evt.item, items[evt.oldIndex]);
                    }
                    _this.$message.error('主演与非主演不支持位置交换')
                    return false
                }
                const ele = tab[oldIndex];
                tab.splice(oldIndex, 1)
                tab.splice(newIndex, 0, ele);
                moviePersonList = tab  // 此处必须赋值一次
                let list = []
                if(tab[newIndex].chief === '是'){
                    tab.map (item => {
                        if(item.chief === '是'){
                            list.push(item.id)
                        }
                    })
                }else{
                    tab.map (item => {
                        if(item.chief !== '是'){
                            list.push(item.id)
                        }
                    })
                }
               //  提交数据
                _this.comitHandle(list)
           }
        })
    },
相关推荐
weixin-a153003083168 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头35 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2293 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔3 小时前
CSS实现百分比水柱图
前端·css