首页 > 其他分享 >【前端】elementUI表格根据状态显示不同的字体颜色

【前端】elementUI表格根据状态显示不同的字体颜色

时间:2023-06-08 19:07:03浏览次数:48  
标签:style 表格 elementUI 单元格 字体 row


elementUI表格根据状态显示不同的字体颜色

elementUI 官网:https://element.eleme.cn/#/zh-CN

cell-style:单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。

实现效果:

【前端】elementUI表格根据状态显示不同的字体颜色_elementui


实现步骤:

el-table标签中增加一个方法回调,:cell-style=“cellStyle”。

【前端】elementUI表格根据状态显示不同的字体颜色_官网_02

在方法中添加:

【前端】elementUI表格根据状态显示不同的字体颜色_elementui_03

// 表格中单元格的字体颜色设置
/***
 * row为某一行的除操作外的全部数据
 * column为某一列的属性
 * rowIndex为某一行(从0开始数起)
 * columnIndex为某一列(从0开始数起)
 */
cellStyle({ row, column, rowIndex, columnIndex }) {
    // 根据状态列显示字体颜色
    if (row.isSync === 0) {
        return "color: #0CB618";
    } else {
        return "";
    }
},

本文完结!


标签:style,表格,elementUI,单元格,字体,row
From: https://blog.51cto.com/no8g/6442235

相关文章

  • elementUI实现excel导出文件
    需要导入依赖npminstall-Sfile-saverxlsxnpminstall-Dscript-loaderhtml页面:<el-buttonicon="el-icon-document"style="float:right;margin-top:5px;margin-left:5px;"circlesize="mini"@click="doExportExcel">&......
  • 【前端方案】-表格排序列LRU缓存方案(二)
    一.目标个人账号的设置记忆功能-避免用户每次登录之后重新对表单字段做展示设置二、存储方案轻量方案结合localstorage低容量存储(5M),根据LRU只存最近访问的20至30张表格列配置数据全量方案大内存G级别,使用indexedDb进行存储,有多少表格操作列数据就存多少,结合第三方库dexie.......
  • 微信H5适配 解决微信调整字体大小导致Html5页面混乱
    最近开发公众号遇到一个问题:iOS、Android加载页面,如果用户调整了微信自带的字体大小,那么我们的页面就会跟随调整字体大小,导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。找了一些方法总结如下:原理:阻止ios和安卓调整字体大小时候的事件,ios通过添加css属性,安卓通过......
  • elementUI下拉框图片
    1、定义数据optionsisAgent:[ //事项咨询群众标识        {          id:'1630396469564334081',          name:'高危',          url:require('@/assets/err.png')     ......
  • ChatGPT玩法(二):AI玩转Excel表格处理
    前言在线免费体验ChatGpt:https://www.topgpt.one你是否还在为记不住Excel的繁琐函数和公式而苦恼?如果是这样,那么不妨试试ChatExcel。即使你对函数一窍不通,也能轻松处理表格。只要你能清楚地描述你的需求,它就可以帮你搞定。此外,ChatExcel的作者还制作了一张工作流程对比图,一眼就......
  • VUE+elementUI前端导出解决方案,截断,清晰度,页边距,页眉页脚,富文本都处理了
    pdfLoader.js--------------------------/**@Description:html转pdf新版解决方案*@Author:jeseven/wwl*@Date:2023-05-2310:03:57*@LastEditTime:2023-05-2310:23:22*@LastEditors:jeseven/wwl*/importjsPDFfrom"jspdf";importhtml2canvasfrom&......
  • React学习时,自己拟定的一则小案例(table表格组件,含编辑)
    某次在Uniapp群看到有人问uniapp如何操作dom元素。他想对这张表标红的区域,做dom元素获取,因为产品想让红色色块点击时,成为可编辑,渲染1~4月份之间的行程安排。于是,有小伙伴说让他用position定位这里,点击时使红色色块层级抬高,弄个input上去。但提问的小伙伴并没有决定这么做,随后......
  • python操作Excel,读取表格内容,并根据需求将内容填充到表格指定位置
    在日常工作中经常会遇到需要将“表一,部门信息表”内容逐行填充到“表二,个人基本信息表”的情况。表一:表二:  实现方式如下:#!usr/bin/python#-*-coding:utf-8-*-importpandasaspdimportopenpyxlasopfromopenpyxlimportWorkbookfromopenpyxlimportl......
  • excel 显示内容与预览内容不一样,字体换行
    普通预览(单元格内容发生换行) 处理方法:我们只需要关闭单元格自动换行指令即可 处理结果 ......
  • 在elementUI-admin中使用printjs进行打印功能的处理
    1.需要加入依赖npminstallprint-js--save-dev2.通过数据的处理打印表格(推荐)在utils文件夹下创建print.js文件importprintJSfrom"print-js";/** * *@param{ *   title:"",//表名 *   serial:false,//是否需要序号 *   data:[],//......