Element-UI的el-table表格使用cell-style根据表格不同数据显示不同颜色

最新推荐文章于 2024-07-25 09:51:39 发布
最新推荐文章于 2024-07-25 09:51:39 发布
阅读量6.3k 收藏 27
点赞数 7
分类专栏： VUE 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44960796/article/details/115528916
版权

1.原表，想要根据不同状态返回不同颜色
在这里插入图片描述
2.在el-table标签添加 :cell-style=“cellStyle”
在这里插入图片描述
3.找到该列对应的lable以及prop
在这里插入图片描述

4.在methods中写入方法，row.row.lossStatus与prop对应，row.column.label与lable对应，返回对应颜色即可
在这里插入图片描述
5.成功
在这里插入图片描述

燊歌威武
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
element-ui 表格实现单元格可编辑的示例
12-29
如下所示： <template> <el data=tableData cell-mouse-enter=handleMouseEnter cell-mouse-leave=handleMouseOut xss=removed> <el label=日期 width=180> <template scope=scope> <span v-if=!scope.row.editFlag>{{ scope.row.name }}</span> <span v-if
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
在Vue.js中，Element-UI库提供了一个强大的表格组件（`el-table`），它允许开发者构建功能丰富的数据展示表格。然而，在某些情况下，我们可能需要对表格中的单元格进行合并，比如当上下两行的数据完全相同时。这有助...
element 表格el-table的 :cell-style用法-表格固定行文字高亮
qq_41910413的博客
06-14 412
el-table的 :cell-style用法。实现表格固定行文字高亮效果。
element-ui表格el-table的使用
m0_63040701的博客
06-01 7067
element-ui表格Table详解。
（element-ui）el-table表格使用cell-style改变单元格样式
weixin_51063441的博客
08-11 4888
直接绑定在el-table标签上 :cell-style="changeCellStyle" 在methods方法里定义 // 表体字体颜色设置 /*** * row为某一行的除操作外的全部数据 * column为某一列的属性 * rowIndex为某一行（从0开始数起） * columnIndex为某一列（从0开始数起） */ cellStyle({ row, column, rowIndex, columnIndex }) { if (row.yoy..
ElementUI的el-table表格使用cell-style根据表格不同数据显示不同颜色
Sanqianll的博客
12-12 3702
针对表格不同数据修改样式
Element-UI：el-table样式修改
席木木的博客
07-11 2851
Element-UI中，el-table组件默认样式在less环境下的自定义。
element-ui el-table 数据变化时表格出现抖动
呆子小木心的博客
04-20 1万+
element-ui el-table 数据变化时表格出现抖动 项目有个需求，有一个表格是通过改造el-table来适应需求，表格的head和body数据都是通过v-for渲染遍历生成的，通过多选框Checkbox来勾选表格头部需要展示的数据，进行切换到时候表格出现抖动不美观。 部分原代码： <el-table :data="tableData" border class="spec-table"> <el-table-column v-for="(item,index) in
element-plus 的 el-table-v2 虚拟化表格 的使用
放荒
04-30 2652
element-plus 的 虚拟化表格 的使用， 在没有使用分页等方式而数据数量很大的时候需要，直接使用表格就会出现渲染太慢，影响使用体验
element-ui里el-table表格操作列多横线怎么解决
2201_75705263的博客
08-26 1189
在vue中封装了element-ui表格，然后使用插槽，fixed定位等，导致样式出现了错乱。
vue：el-table初始化表格选中项踩坑记录/element-ui表格
smm的博客
05-23 2112
el-table初始化表格选中项踩坑记录
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
element-ui 中的table的列隐藏问题解决
12-12
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的。之前用bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列...
element-ui el-table与el-form同用,并校验
热门推荐
潇蓝诺依的博客
08-28 1万+
文章目录基本结构添加校验自己写校验方法其他校验 基本结构 <template> <div> <el-form ref="form" :model="form"> <el-table ref="table" :data="form.tableData" empty-text='暂无数据'> <el-ta...
VUE项目修改浏览器图标及名称、修改网址图标及名称
weixin_44960796的博客
04-25 1101
1.原图 2.修改，在public下的index.html中修改，图片后缀名改为ico 3.更改成功
vue项目如何安装使用element-ui
weixin_44960796的博客
04-21 402
1.首先打开需要安装element-ui的项目控制台 2.输入npm i element-ui -S，然后运行 3.在项目中引用了elemtnt-ui，打开src目录下的main.js 输入:import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’ Vue.use(ElementUI) 4.完成，可以使用elemtnt-ui啦 ...
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 468
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Vue.js中自定义Markdown插件实现References解析
最新发布
浮游的博客
07-25 311
是一个快速、灵活的Markdown解析器，它支持CommonMark标准，并且可以通过插件来扩展其功能。在Vue.js项目中，我们可以使用来将Markdown文本转换为HTML。在某些情况下，我们可能需要在Markdown文本中包含自定义的HTML标签，例如标签，用于显示参考文献或其他额外信息。为了能够在中解析这些自定义标签，我们需要编写一个自定义插件。首先，我们需要定义插件应该执行的功能。在我们的例子中，插件需要识别标签，并将其转换为相应的HTML结构。我们使用正则表达式来匹配Markdown文本中的。
element ui修改el-table某一个表格单元格边框颜色
11-07
要修改element ui中el-table某一个表格单元格边框颜色，可以按照以下步骤进行操作： 1. 将el-table包在自定义组件（page_table）里面，以便于重复使用。 2. 设置除表头单元格边框样式，即在page_table中设置cell-style属性为"{borderColor:'#C0C0C0'}"，其中#C0C0C0为所需的边框颜色。 3. 在需要修改边框颜色的单元格中，设置该单元格的style属性为"{borderColor:'#C0C0C0'}"，其中#C0C0C0为所需的边框颜色。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

燊歌威武

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值