VUE element-ui之table表格内容样式(颜色)修改

简介: VUE element-ui之table表格内容样式(颜色)修改

要求将表格中的负数显示为红色

实现步骤:
定义样式方法

<el-table
      id="tabs"
      v-loading="loading"
      :data="tableData"
      height="580"
      border
      style="width: 100%"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      :cell-style="cellStyle"     样式方法
    >

利用方法传递参数进行js判断

cellStyle(row) {注意:这里需要进行双重判断(逻辑与),列名与列内容需同时满足条件。
      if (row.column.label === '销售金额环比(%)' && row.row.priceChainRatio< 0) {
        return 'color:#FF0000'
      }
    }

效果如图
在这里插入图片描述
此方法简单易懂其他样式修改可自行测试

相关文章
|
2月前
|
存储
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
本篇将带你实现一个颜色选择器应用。用户可以从预设颜色中选择,或者通过输入颜色代码自定义颜色来动态更改界面背景。该应用展示了如何结合用户输入、状态管理和界面动态更新的功能。
71 3
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
|
5月前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
436 61
|
5月前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
303 5
Vue使用element中table组件实现单选一行
|
4月前
|
存储 JavaScript UED
在 Vue 组件中动态切换全局样式
【10月更文挑战第5天】
82 1
|
4月前
|
JavaScript 前端开发
|
5月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
4月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
61 0
|
5月前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
110 1
|
6月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
192 0
Vue3表格(Table)
|
6月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
100 1