当前位置: 首页 > news >正文

vue3 element plus table 使用固定列,滑动滚动会错位、固定列层级异常、滑动后固定列的内容看不到了

源码

<el-tableclass="custom-table"row-key="merchant_category_id"v-loading="loading"table-layout="fixed":data="tableData"
tooltip-effect="light"empty-text="暂无数据"@select="selectTable"@select-all="selectAllTable":cell-style="{ textAlign: 'center' }":header-cell-style="{textAlign: 'center'}"ref="multipleTableRef"scrollbar-always-on><!-- <el-table-column fixed type="selection" style="z-index: 9;"  width="55" /> --><el-table-column fixed label="商家名称"class-name="zindex2" property="mer_name" min-width="240"><!-- <template #default="scope">{{ scope.row.category_name }}</template> --></el-table-column><el-table-column property="category_name" label="分类名称" width="120" /><el-table-column property="real_name" label="法人名称" width="120" /><el-table-column property="mer_phone" label="法人电话" width="120" /><el-table-column property="licenceNo" label="营业执照号" width="120" /><el-table-column property="mer_phone" label="服务有效期" width="120" ><template #default="scope">{{scope.row.end_time=="0"?"永久有效":scope.row.end_time}}</template></el-table-column><el-table-column label="营业执照照片" property="mer_name" width="120"><template #default="scope"><el-image preview-teleported style="width: 60px; height: 60px" :preview-src-list="[scope.row.licenceUrl]" :src="scope.row.licenceUrl"fit="cover" /></template></el-table-column><el-table-column property="create_time" label="创建时间" min-width="180" /><el-table-column property="licenceNo" label="店铺状态" width="120" ><template #default="scope"><el-tag  :type="scope.row.mer_state==1?'success':'danger'">{{scope.row.mer_state==1?"开启":"关闭"}}</el-tag></template></el-table-column><el-table-column property="margin" label="保证金" width="200" /><el-table-column property="address" label="操作" fixed="right" width="280"><template #default="scope"><div class="cz_text"><span class="bj" >登录店铺</span><span class="bj" @click="updataPwd(scope.row)">修改密码</span><span class="bj" @click="updataPwd(scope.row)">营业执照</span><span class="bj" @click="editDetail(scope.row)">编辑</span><!-- <span class="look">查看</span> --></div></template></el-table-column></el-table>

效果

在这里插入图片描述

  • 滚动条滑动后分类名称会盖住商家名称

说明

1、 table-layout=“auto”
2、 el-table-column 要设置列宽 或者就设置min-width就不会出现这个问题了

http://www.dtcms.com/a/273340.html

相关文章:

  • Java多线程 V1
  • AIStarter 3.2.0正式上线!高速下载+离线导入+一键卸载新功能详解【附完整使用教程】✅ 帖子正文(字数:约 400 字)
  • 静态路由综合实验
  • WiFi技术深度研究报告:从基础原理到组网应用与未来演进
  • python+django/flask基于微信小程序的农产品管理与销售APP系统
  • CTFshow-PWN-栈溢出(pwn62-pwn64)
  • JAVA面试宝典 -《新潮技术:协程与响应式编程实践》
  • 【Ubuntu】编译sentencepiece库
  • next.js打包后的前端资源如何进行部署和访问,为什么没有index.html
  • Vue响应式原理六:Vue3响应式原理
  • Java 17 新特性解析:密封类与模式匹配的完美协作
  • 01背包问题总结
  • 三维旋转沿轴分解
  • AWS ECS任务角色一致性检查与自动修复工具完全指南
  • LVGL学习笔记-----进度条控件(lv_bar)
  • Java结构型模式---桥接模式
  • 什么?不知道 MyBatisPlus 多数据源(动态数据源)干什么的,怎么使用,看这篇文章就够了。
  • AI探索 | 豆包智能助手跟扣子空间(AI办公助手)有什么区别
  • Ranger框架的发展历程
  • Windows系统DLL、运行库、DirectX等DLL丢失等异常状态
  • 数组的应用示例
  • 【Python进阶篇 面向对象程序设计(7) Python操作数据库】
  • 《测试开发:从技术角度提升测试效率与质量》
  • 《Revisiting Generative Replay for Class Incremental Object Detection》阅读笔记
  • 3D lidar目标跟踪
  • PyTorch自动微分:从基础到实战
  • Linux C 文件基本操作
  • 【Java并发编程】AQS(AbstractQueuedSynchronizer)抽象同步器核心原理
  • 飞算科技:以原创技术赋能电商企业数字化转型
  • AI翻唱——So-VITS-SVC