element table列表根据数据设置背景色

 更新时间:2023年08月24日 11:17:03   作者:冷冰染  
在使用elementui中的el-table时,需要将表的背景色和字体颜色设置为新颜色,本文就来介绍一下element table列表根据数据设置背景色,感兴趣的可以了解一下

效果

页面代码

通过 :cell-class-name 动态绑定类名

    <el-table :data="tableData" style="width: 100%" :cell-class-name="myclass">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

数据

      tableData: [
        {
          date: "2023-05-02",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1518 弄",
          isShow: 1,
        },
        {
          date: "2023-05-04",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1517 弄",
          isShow: 1,
        },
        {
          date: "2023-05-01",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1519 弄",
          isShow: 0,
        },
        {
          date: "2023-05-03",
          name: "兔子先森",
          address: "上海市普陀区金沙江路 1516 弄",
          isShow: 2,
        },
      ],

js方法

直接写到 methods 中,列表绑定即可,不需要放到生命周期中。

    // 修改单元格样式的方法
    myclass({ row, column, rowIndex, columnIndex }) {
      // row当前行,column表格列,rowIndex表格的第几行,columnIndex第几个格子
      // 根据当前行的参数判断,修改当前行样式
      if (row.isShow == 0) {
        return "setclass";
      } else if (row.isShow == 2) {
        return "setSuccess";
      }
      // 还可以设置对应单元格颜色
      // 表格的第二行-起始下标0
      if (rowIndex === 1) {
        // 第二行下标为1的格子
        if (columnIndex == 1) {
          return "setHeight";
        }
      }
    },

css部分

不能使用 scope 作用域,否则背景色不生效

<style lang='scss'>
.setclass {
  background: yellow !important;
  color: red !important;
}
.setSuccess {
  background: green !important;
  color: white !important;
}
.setHeight {
  color: blue !important;
}
</style>

动态刷新列表数据关联列表背景色

当列表数据更改时,我们需要根据列表数据来动态判断列表是否高亮提示,此时只需要更改列表数据即可,列表重载数据会再次动态刷新,不需要调用任何方法

// 数据未上述列表数据
    isDanger() {
      this.tableData.forEach((el,index) => {
        if(index % 2 == 0){
          el.isShow = 0
        }else {
          el.isShow = 2
        }
      });
    }

相关文章

  • vue实现excel文件导入导出操作示例

    vue实现excel文件导入导出操作示例

    这篇文章主要为大家介绍了vue实现excel文件的导入导出实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 使用vue制作滑动标签

    使用vue制作滑动标签

    这篇文章主要为大家详细介绍了使用vue制作滑动标签,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue3使用vuedraggable实现拖拽功能

    vue3使用vuedraggable实现拖拽功能

    这篇文章主要为大家详细介绍了vue3使用vuedraggable实现拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue后台管理系统权限控制与动态路由的实现

    Vue后台管理系统权限控制与动态路由的实现

    本文主要介绍了Vue后台管理系统权限控制与动态路由的实现,可以根据用户的角色灵活控制页面访问权限,提高系统的安全性和用户体验,感兴趣的可以了解一下
    2025-04-04
  • vue3页面跳转传值时获取不到params值的问题解决

    vue3页面跳转传值时获取不到params值的问题解决

    在Vue3页面跳转时传递和获取参数通常通过路由参数和查询字符串实现,本文主要介绍了vue3页面跳转传值时获取不到params值的问题解决,感兴趣的可以了解一下
    2024-11-11
  • vue移动端使用appClound拉起支付宝支付的实现方法

    vue移动端使用appClound拉起支付宝支付的实现方法

    这篇文章主要介绍了vue移动端使用appClound拉起支付宝支付的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue中的attribute和property的具体使用及区别

    vue中的attribute和property的具体使用及区别

    本文主要介绍了vue中的attribute和property的具体使用及区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue如何设置定时器和清理定时器

    vue如何设置定时器和清理定时器

    这篇文章主要介绍了vue如何设置定时器和清理定时器,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue进入页面时滚动条始终在底部代码实例

    vue进入页面时滚动条始终在底部代码实例

    这篇文章主要介绍了vue进入页面时滚动条始终在底部,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue页面跳转动画效果的实现方法

    Vue页面跳转动画效果的实现方法

    百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下
    2018-09-09

最新评论