解决el-table表格拖拽后,只改变了数据,表头没变的问题

先看看是不是你想要解决的问题

拖拽后表头不变的bug修复

这个问题一般是使用v-for对column的数据进行循环的时候,key值绑定的是个index导致的,请看我上篇文章eleplus对el-table表格进行拖拽(使用sortablejs进行列拖拽和行拖拽):-CSDN博客文章浏览阅读36次。对于列拖拽:点击某列的表头前后挪移时,松开鼠标左键后,挪移的列就应该在哪列显示。行拖拽:和列拖拽一样。https://blog.csdn.net/weixin_42234899/article/details/139627036?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22139627036%22%2C%22source%22%3A%22weixin_42234899%22%7D

javascript 复制代码
<div>
        <el-table
            :data="tableData"
            border
            scrollbar-always-on
            ref="tableHeader"
            row-key="id"
        >
            <template v-for="(item, index) in setColumns" :key="index">
                <!-- 操作列 -->
                <el-table-column
                    v-if="item.prop === 'oprate'"
                    fixed="right"
                    :prop="item.prop"
                    :label="item.label"
                >
                    <template #header>
                        <div class="search-title">
                            <div :class="checked ? 'search-titleName' : ''">操作</div>
                            <el-icon class="search-icon" @click="search">
                                <Search color="#409EFF" />
                            </el-icon>
                        </div>
                    </template>
                </el-table-column>
                <!-- 序号列 -->
                <el-table-column
                    v-else-if="item.prop === 'index'"
                    :type="item.type"
                    :label="item.label"
                    :width="item.width || 100"
                />
                <!-- 数据列 -->
                <el-table-column
                    v-else
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width || 100"
                />
            </template>
        </el-table>
    </div>

把v-for循环的key值绑定为其他的唯一值就可以修复这个问题。主要是因为在拖拽后,改变数据的位置,及setColumns数组的顺序,但在循环时的key值,在拖拽前和拖拽后的key值是一样的,所以表头的数据显示不会改变。我在这里,把 :key=index 改成了 :key=item.label 即可解决。

相关推荐
liangshanbo12151 分钟前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_3 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD3 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~3 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
爱看书的小沐5 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586545 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊6 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php