Element UI & Element Plus之改变表格单元格颜色

简介: 这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。

前言

首先官网文档的 Table 表格 组件有相关说明,只需要在el-table标签中加上:cell-style="xxx",以及实现该方法即可。Element UI框架和Element Plus框架在使用上有一点点区别,因此记录一下下。

Element UIElement - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

Element Plus一个 Vue 3 UI 框架 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/

一、示例代码

1.Element UI 示例

(1)/src/views/Example/CellStyle/index_1.vue

<el-table
  border
  size="mini"
  row-key="id"
  highlight-current-row
  :data="feats.list"
  :cell-style="handleChangeCellStyle"
>
  <el-table-column label="评分" width="100" align="center">
    <template slot-scope="scope">
      <el-link type="danger">{
   
   {
   
    scope.row.score }}</el-link>
    </template>
  </el-table-column>
</el-table>

methods: {
   
   
  /**
   * 改变表格单元格颜色
   */
  handleChangeCellStyle({
   
   row, column, rowIndex, columnIndex}) {
   
   
    let cellStyle
    if (row.score > 9) {
   
   
      cellStyle = 'background-color: #ffdcdc'
    }
    else if (row.score > 7) {
   
   
      cellStyle = 'background-color: #fde2c2'
    }
    else {
   
   
      cellStyle = 'background-color: #fff'
    }

    if (column.label === '评分') {
   
   
      return cellStyle
    }
  },
}

2.Element Plus 示例

(1)/src/views/Example/CellStyle/index_2.vue

<el-table
  border
  size="small"
  row-key="id"
  highlight-current-row
  :data="feats.list"
  :cell-style="handleChangeCellStyle"
>
  <el-table-column label="评分" width="100" align="center">
    <template slot-scope="scope">
      <el-link type="danger">{
   
   {
   
    scope.row.score }}</el-link>
    </template>
  </el-table-column>
</el-table>

methods: {
   
   
  /**
   * 改变表格单元格颜色
   */
  handleChangeCellStyle({
   
   row, column, rowIndex, columnIndex}) {
   
   
    let cellStyle = {
   
   }
    if (row.score > 9) {
   
   
      cellStyle.backgroundColor = '#ffdcdc'
    }
    else if (row.score > 7) {
   
   
      cellStyle.backgroundColor = '#fde2c2'
    }
    else {
   
   
      cellStyle.backgroundColor = '#fff'
    }

    if (column.label === '评分') {
   
   
      return cellStyle
    }
  },
}

三、运行效果

目录
相关文章
|
15天前
|
JavaScript 前端开发 开发工具
使用vue3+element-ui plus 快速构建后台管理模板
本文介绍了如何使用Vue 3和Element UI Plus快速构建后台管理模板的步骤,包括安装Vue 3脚手架、Element UI Plus以及如何全局配置Element UI Plus。然后详细讲解了如何使用Element UI Plus构建布局,包括Header组件、Aside组件和HomeView视图的创建和样式调整,以及App.vue和main.css的修改,最后提供了项目的文件结构图和效果展示。
使用vue3+element-ui plus 快速构建后台管理模板
|
29天前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
2月前
|
JavaScript
基于Element UI或Element Plus实现具有倒计时的Message消息提示
本文介绍了如何在Element UI或Element Plus框架中实现具有倒计时功能的消息提示组件,支持多次点击生成多个独立倒计时的消息提示,并提供了详细的实现代码和使用示例。
230 1
基于Element UI或Element Plus实现具有倒计时的Message消息提示
|
2月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
57 1
|
2月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
87 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
2月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
73 0
|
2月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
121 0
|
2月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
105 0
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍

热门文章

最新文章