element 封装表格table-column列顺序不对

最新推荐文章于 2024-04-16 14:54:53 发布
最新推荐文章于 2024-04-16 14:54:53 发布
阅读量2.9k 收藏 16
点赞数 15
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26314225/article/details/119946558
版权

问题

封装表格时表头出现了顺序错乱的情况

我这样写的，因为需要自定义列隐藏，所以加了一层div包裹

最开始的解决方案

过程中发现在最前面加一列就可以解决顺序错乱问题，所以就用了下面图片中的方式来解决

用了一段时间后，还是觉得不太舒服，毕竟莫名奇妙多了一行代码

后来

找度娘看了下

  • el-table-column加key

先看到了这个，尝试了一下没啥效果

  • 官方issues

后面看到官方issues里面，惊喜的发现下面的解决方案里居然有说用表格增加个宽度为1的列来解决的，感觉离大佬们又近一步，果断一个赞


但是也说了这个方案毕竟不太好

后来就看到了这个

翻译过来就是这样子，说el-table不能嵌套el-table-column以外的元素

最后

简单而不失优雅的把包裹的div标签改为template，搞完收工


稀饭52
关注
【vue+elementUI】表格列展示顺序错乱
栀妹儿的炼丹炉
10-16 4283
element-ui 中的 el-table表格 el-table-column列展示排序不是代码顺序，刷新顺序改变（排序错乱） 解决 利用 key=“1” 代码 <el-table show-overflow-tooltip="true" :data="tableData" tooltip-effect="dark" v-loading="tableLoading" :header-cell-style="{background:'#EFF3F8',colo
基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件
Hurt__的博客
01-09 1613
简介 基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能 安装 npm install af-table-column 使用 注意: 需要事先引入 Vue 和 Element-UI 依赖库, 并在 组件下使用该组件 // main.js import Vue from ‘vue’ import ElementUI from ‘element-ui’ ...
使用el-table时el-table-column的顺序位置改变的问题
zhekua0305的博客
06-16 5839
使用el-table时el-table-column的顺序位置改变的问题解决方法 解决方法 <el-table> <el-table-column v-if="currentTabSelector == '欠费项目'" label="当前欠费总额" :key="Math.random()" prop="projectArrearage" /> <el-
el-table-column列顺序错乱问题
weixin_41359197的博客
10-08 2515
el-table二次封装的自定义表格或者动态表格，常见列顺序错乱问题
element封装表格组件el-table-column列顺序错乱
UUID、
11-01 4234
1、父组件给子组件传递对象，子组件使用 ：style="[customStyle]" 绑定，达到父组件随意修改子组件的目的。 2、判断文件后缀是否允许 // 允许上传的图片后缀 limitType:{ type: Array, default() { return ['png', 'jpg', 'jpeg', 'webp', 'gif']; } }, checkFileExt(file) { // 检查是否在允许的后缀中 let noArrowExt = false; // 获取后缀名 le
element-ui中使用el-table ，el-table-column循环列发现列错乱解决方法
m0_55074611的博客
03-21 5062
由于需要动态循环列展示表格而不得不套一层div标签时会造成表格列错乱的想象，这是因为el-table中不允许有除el-table-column标签以外的元素。
element table 列顺序错乱问题
zhl_cafe的博客
08-05 3617
问题：如标题所言，代码里用v-if控制的列的显示与否，但是页面上本该第一列的直接变成了最后一列，网上有说，用v-show代替v-if的，可能我的代码逻辑比较复杂，没有成功。，所以把上面的span全部替换成template就可以了，即改成这样就可以了，这样，在页面上就是想要的列的顺序了。发现table里面除了el-table-column外，只能有template标签。...
element表格列顺序错误
Duke10的博客
01-19 1318
element表格列顺序错误
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
08-10
本项目"基于ElementUI二次封装的支持自适应列宽的table-column列组件"正是针对Element-UI的table组件进行了一次深度定制，以解决在数据展示过程中列宽自动适应的问题。 Element-UI的table组件在默认情况下，列宽...
【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用
最新发布
09-10
【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮...
基于Element封装一个表格组件tableList的使用方法
10-15
对于自适应列宽，除了使用 Element UI 的默认 auto-column-width 功能，还提供了自定义的 autoFit 方法，进一步优化了用户体验。 在实际使用中，开发者只需要按照 tableList 的数据结构传入相应的数据即可实现一个...
基于Vue与element 封装Table 表格
Joe
03-22 440
避免重复代码，简化界面，统一配置引用,达到一次注册、全局使用,提升开发维护效率和界面统一的效果
el-table 加上排序之后 出现显示的数据与返回的数据的顺序不一致的问题
m0_61840359的博客
01-15 1497
我的列表的列是循环的出来的 前面可以排序的都吗没有问题 就只有其中一个排序出现列表显示的顺序与后端返回的数据的顺序不一致。事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。之前的写法是这个样子的 很多循环出来的都是正常的 只有其中一个显示的顺序是错误的。虽然不知道为啥但是文档就是这样写的 哈哈哈哈哈 那就先这样吧。远程请求的时候 sortable 需要设置成 custom。，同时在 Table 上监听。如果需要后端排序，需将。然后代码改成这样就好了。
element 拖拽更改表格行和列顺序
qq_45713015的博客
04-16 2591
原文链接：https://blog.csdn.net/weixin_44088179/article/details/134117058。handle: false, //是否是操作栏。label: "编辑", //操作名称。handleList: [], //操作按钮。handleList: [], //操作按钮。handleList: [], //操作按钮。prop: "address", //字段名。handleList: [], //操作按钮。prop: "operate", //字段名。
ELEMENT table column不按顺序排列问题
u012174809的专栏
08-26 3146
刚接触ELEMENT，因为COLUMN这个标题列我是动态排列的，所以用了V-FOR V-IF等指令，很奇怪，竟然没有按我写的顺序排列，调整了一个小时，崩溃了，于是百度。发现不止我一个人有这个问题。现附件正解 关键靠key='1'这玩意 <!-- 人员姓名 --> <el-table-column key="1" align="center" width="60" :label="$t('attendance.memberName')"> .
el-table的el-table-column排序
weixin_48215380的博客
02-25 2514
el-table-column排序功能
vue2 element-ui表格操作列调整行顺序
qq_45713015的博客
04-16 484
**要被操作的元素 */let moveElement = arr.splice(scope.$index, 1);/**要被操作的元素 */message: '已经是最后一条数据了',message: '已经是第一条数据了',
element vue table表格如何合并行，列名顺序如何更换
qq_43610925的博客
11-03 653
【代码】element vue table表格如何合并行，列名顺序如何更换。
elementui+vue el-table插入el-table-column导致乱序问题解决方案
beyondkqw的博客
11-18 1126
1.el-table 做几个日志列表(只有些许列不一致的场景)： 不能用组件方式插入el-table-column,会使列乱序（查资料解释说组件引入会多加一层容器，导致elementUI不能正确排序）。只能换位用slot插入动态的column，完美解决！ ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值