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'
      }
    }

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

相关文章
|
8月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
479 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
654 61
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
830 5
Vue使用element中table组件实现单选一行
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
12月前
|
存储 JavaScript UED
在 Vue 组件中动态切换全局样式
【10月更文挑战第5天】
278 1
|
12月前
|
JavaScript 前端开发
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
12月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
873 0
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
646 0
Vue3表格(Table)

热门文章

最新文章