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

Element——el-table单元格无法设置外边距，只能通过border-width实现间隔效果

news 来源：原创 2024/5/7 16:56:23

场景

开发中有需求使用el-table实现如下展示效果：
在这里插入图片描述

问题

内部使用的el-table实现效果，但是设置单元格自检的灰色间距时发现cell-style中设置margin没有效果

解决方案

通过设置border-width，加大边框宽度实现间距效果

优化

使用v-for双循环和div自定义效果是最简单的实现方法，同时样式的把控和事件的处理也比较容易，el-table对数据格式有要求，且事件处理，样式分场景覆写都会有压力，

相关文章：

  • 分支开发模式Git常用操作
  • /deep/和 ＞＞＞以及 ::v-deep 三者的区别
  • Vue——子组件中引入父组件
  • Vue——$attrs和$listeners
  • JS代码优化技巧——持续更新
  • 文字居于div底部的方式
  • Element——el-table设置单元格间距
  • Vue——插槽语法
  • Element——给el-table表头添加*
  • Element——tooltip无效和自定义内容
  • Vue——provide/inject的使用
  • windows注册表自定义添加右键菜单
  • 请求正常执行但是js语法报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)
  • 使用图片做背景并设置充满固定屏幕
  • Vue——组件间数据访问方式与通信方式的一点总结思考
  • [笔记] php常见简单功能及函数
  • [原]深入对比数据科学工具箱：Python和R 非结构化数据的结构化
  • 《微软的软件测试之道》成书始末、出版宣告、补充致谢名单及相关信息
  • 【编码】-360实习笔试编程题（二）-2016.03.29
  • CODING 缺陷管理功能正式开始公测
  • DOM的那些事
  • Electron入门介绍
  • es6
  • HTTP 简介
  • java 多线程基础, 我觉得还是有必要看看的
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制！
  • spring学习第二天
  • 安卓应用性能调试和优化经验分享
  • 动态魔术使用DBMS_SQL
  • 读懂package.json -- 依赖管理
  • 搞机器学习要哪些技能
  • 给github项目添加CI badge
  • 回流、重绘及其优化
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 前端工程化（Gulp、Webpack）-webpack
  • 如何在GitHub上创建个人博客
  • 收藏好这篇，别再只说“数据劫持”了
  • mysql面试题分组并合并列
  • 函数计算新功能-----支持C#函数
  • 组复制官方翻译九、Group Replication Technical Details
  • ​云纳万物 · 数皆有言｜2021 七牛云战略发布会启幕，邀您赴约
  • #设计模式#4.6 Flyweight（享元） 对象结构型模式
  • (2/2) 为了理解 UWP 的启动流程，我从零开始创建了一个 UWP 程序
  • (LeetCode) T14. Longest Common Prefix
  • （PWM呼吸灯）合泰开发板HT66F2390-----点灯大师
  • (vue)页面文件上传获取:action地址
  • （附源码）ssm高校运动会管理系统 毕业设计 020419
  • (官网安装) 基于CentOS 7安装MangoDB和MangoDB Shell
  • （介绍与使用）物联网NodeMCUESP8266（ESP-12F）连接新版onenet mqtt协议实现上传数据（温湿度）和下发指令（控制LED灯）
  • （三） diretfbrc详解
  • (转) Face-Resources
  • （转）Android学习笔记 --- android任务栈和启动模式
  • （转）ObjectiveC 深浅拷贝学习
  • （转）Sublime Text3配置Lua运行环境
  • （转）关于如何学好游戏3D引擎编程的一些经验