element plus如何为表格某列数据文字设置颜色样式

 更新时间:2023年10月17日 11:16:09   作者:燕哥学前端  
实习工作需要根据表格的状态字段来设置列的样式,所以这篇文章主要给大家介绍了关于element plus如何为表格某列数据文字设置颜色样式的相关资料,需要的朋友可以参考下

有时候业务需要,需要将表格里的数据换上不同颜色的样式,以便查看,查看官方文档,有一个属性可以修改表格的样式

话不多说,放代码:

<el-table ref="multipleTableRef" 
    :data="tableData" 
    style="width: 100%"
    @selection-change="selectionChange"
    :cell-style="cellStyle"
    >
      ...
      <el-table-column property="type" label="一级分类">
      </el-table-column>
      <el-table-column property="classify" label="二级分类"/>
      ...
      <el-table-column property="standardState" label="标准状态"/>
 
    </el-table>

js:

  const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      // 状态列字体颜色
      // columnIndex 列下标
      // rowIndex 行下标
      // row 行
      // column 列
     if (row.type !=null && columnIndex === 3) {
        return { color: "#189EFF" };
      }else if (row.classify != null && columnIndex === 4) {
        return { color: "#189EFF" };
      } else if (row.standardState =='现行' && columnIndex === 6) {
        return { color: "#1CD66C" };
      } else if (row.standardState == '即将实施' && columnIndex === 6) {
        return { color: "#189EFF" };
      } else if (row.standardState == '废止' && columnIndex === 6) {
        return { color: "red" };
      }
    }

总结

到此这篇关于element plus如何为表格某列数据文字设置颜色样式的文章就介绍到这了,更多相关elementplus表格列数据设置颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue的列表之渲染,排序,过滤详解

    Vue的列表之渲染,排序,过滤详解

    这篇文章主要为大家详细介绍了Vue的列表之渲染,排序,过滤,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 详解Vue注册组件的方法

    详解Vue注册组件的方法

    Vue注册组件有这几种,分别是全局注册、局部注册、在模块系统中注册,这篇文章主要介绍了Vue注册组件的方法,需要的朋友可以参考下
    2022-08-08
  • vue.js el-table虚拟滚动完整实例代码

    vue.js el-table虚拟滚动完整实例代码

    这篇文章主要给大家介绍了关于el-table虚拟滚动的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下
    2022-12-12
  • Vue+Element+Springboot图片上传的实现示例

    Vue+Element+Springboot图片上传的实现示例

    最近在学习前段后分离,本文介绍了Vue+Element+Springboot图片上传的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2021-11-11
  • vue关于接口请求数据过大导致浏览器崩溃的问题

    vue关于接口请求数据过大导致浏览器崩溃的问题

    这篇文章主要介绍了vue关于接口请求数据过大导致浏览器崩溃的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3+echarts绘制世界地图的示例代码

    Vue3+echarts绘制世界地图的示例代码

    最近做项目需要实现世界地图,本文主要介绍了Vue3+echarts绘制世界地图的示例代码,具有一定的参考价值,感谢的可以了解一下
    2024-03-03
  • ElementUI对table的指定列进行合算

    ElementUI对table的指定列进行合算

    本文主要介绍了ElementUI对table的指定列进行合算,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue项目打包后部署到服务器的详细步骤

    vue项目打包后部署到服务器的详细步骤

    这篇文章主要介绍了vue项目打包后部署到服务器,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue3.0基于views批量实现动态路由的方法(示例代码)

    vue3.0基于views批量实现动态路由的方法(示例代码)

    以前vue项目中也有很多实现动态路由的方法,比如有一些项目涉及权限的可能会使用api请求路由数据在来createRouter,或者本地构建使用routes.push来动态构建路由, 今天介绍一种新的方式来基于某个文件夹批量构建动态路由的方法,感兴趣的朋友一起看看吧
    2024-12-12
  • Vue实现快捷键录入功能的示例代码

    Vue实现快捷键录入功能的示例代码

    有的时候项目需要在页面使用快捷键,而且需要对快捷键进行维护。本文将为大家展示Vue实现快捷键录入功能的示例代码,感兴趣的可以了解一下
    2022-04-04

最新评论