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项目自动检测服务端是否发布了新版本,通过轮询方式检测Vue项目新版本并提示用户刷新页面,具有一定的参考价值,感兴趣的可以了解一下
    2025-01-01
  • Vue中多元素过渡特效的解决方案

    Vue中多元素过渡特效的解决方案

    本文将详细介绍通过Vue使多元素进行过渡动画,需要的朋友可以参考下
    2020-02-02
  • 解决vue-cli3 使用子目录部署问题

    解决vue-cli3 使用子目录部署问题

    这篇文章主要介绍了解决vue-cli3 使用子目录部署问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 关于vue的列表图片选中打钩操作

    关于vue的列表图片选中打钩操作

    这篇文章主要介绍了关于vue的列表图片选中打钩操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue elementUI下拉框值无法选中问题及解决方案

    vue elementUI下拉框值无法选中问题及解决方案

    大家在写系统的时候,会有这样的需求:点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框,展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了,下面给大家分享vue elementUI下拉框值无法选中问题,感兴趣的朋友一起看看吧
    2024-03-03
  • Vue3中使用混入(Mixin)的示例详解

    Vue3中使用混入(Mixin)的示例详解

    混入(Mixin)是 Vue 中一种代码复用的模式,允许将组件的选项抽离为独立模块,下面就跟随小编一起来深入了解下如何在Vue3中使用混入Mixin吧
    2025-03-03
  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    这篇文章主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue百度地图maker标注的添加和删除方式

    Vue百度地图maker标注的添加和删除方式

    这篇文章主要介绍了Vue百度地图maker标注的添加和删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3.0+element表格获取每行数据代码示例

    vue3.0+element表格获取每行数据代码示例

    这篇文章主要给大家介绍了关于vue3.0+element表格获取每行数据的相关资料,在element-ui中,你可以通过为表格的行绑定单击事件来获取表格中的一行数据,需要的朋友可以参考下
    2023-09-09
  • vue.nextTick()与setTimeout的区别及说明

    vue.nextTick()与setTimeout的区别及说明

    这篇文章主要介绍了vue.nextTick()与setTimeout的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论