解决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)
           }
        })
    },
相关推荐
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8162 小时前
scroll-marker轮播组件不再难
前端·css
你的人类朋友2 小时前
🫏光速入门cURL
前端·后端·程序员
01传说3 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js