在 vueJS 2 中具有分页但无法呈现的 element-ui 表行的背景颜色

Posted 2023-02-22

【中文标题】在 vueJS 2 中具有分页但无法呈现的 element-ui 表行的背景颜色

【英文标题】：Background colors to rows of a element-ui table with pagination in vueJS 2 but failing to render

【发布时间】：2019-06-30 10:02:41

【问题描述】：

我必须根据表格中的结果列为 false 添加红色背景颜色，为 true 添加绿色背景，我使用的是 elementUI + data-tables 的分页 + vuejs。我正在尝试通过在结果列上使用样式绑定来添加列声明，提前感谢

我的模板代码

<template slot="header" slot-scope="table" :style = "customRowBackground(table.row)">
<template slot-scope="table"> table.row.launch_success </template>
</el-table-column>

我的 customRowBackgrond() 函数

 customRowBackgrond(row)     
      if (row.launch_success == true) 
        return 'backgrondColor': 'rgb(252, 230, 190)';
       
      else if (row.launch_success == false) 
        return  backgrondColor: 'rgb(252, 230, 190)';
       
      else 
        return backgrondColor: 'rgb(252, 230, 190)';
      
    ,

我需要将整个表的真值设置为绿色，将假值设置为红色....提前致谢。

【问题讨论】：

我在 element ui 表上使用 element-ui + vuejs + data-tables 来获取分页

我觉得应该是backgrond-color吧？最后 2 次返回没有单引号。

感谢@thefallen，但我的餐桌上没有任何变化

我认为您在样式标签中缺少这些 括号

【参考方案1】：

vueJs中需要一些类绑定或样式绑定。https://vuejs.org/v2/guide/class-and-style.html

我需要最小化以下类绑定逻辑。 我的模板代码：

<span :class="['row_success':table.row.launch_success,'row_fail':!table.row.launch_success,'row_schedule':table.row.launch_success == null]">
<span class="cell_text_wrapper"> table.row.flight_number </span>
</span>

我的 CSS 代码

.el-table td .row_success 
    color: #1caa14;
    background-color: #defdde;
    padding: 0;
    display: table;

  
  .el-table td .row_fail 
    color: #f83364;
    background-color: #fdecec; 
    padding: 0;
    display: table;

  
  .el-table td .row_schedule 
    color: #0e0e83;
    background-color: #d2f8f7;
    padding: 0;
    display: table;
  

需要在运行时动态创建的其他一些 css 类修改。

【参考方案2】：

试试这个

:style = "table.row.launch_success == true ? '"backgrondColor": "rgb(252, 230, 190)"' : table.row.launch_success == false ? '"backgrondColor": "rgb(252, 230, 190)"' : '"backgrondColor': "rgb(252, 230, 190)"'

或者

在模板中

<el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">

更新方法如下

methods: 
      tableRowClassName(row, rowIndex) 
        if (row.launch_success == true) 
          return 'success-row';
         else if (row.launch_success == false) 
          return 'warning-row';
        
        return 'other-row';
      
    ,

更新 CSS 如下

.el-table .warning-row 
background: 'rgb(252, 230, 190)';


.el-table .success-row 
background: 'rgb(252, 230, 190)';


.el-table .other-row 
background: 'rgb(252, 230, 190)';

【讨论】：

谢谢@Ridhi，但我的要求不同......我在 Vuejs2 参考中使用 el-table + vue-data -tables：njleonzhang.com/vue-data-tables/#/en-us/actionBar。我想知道它必须在哪里工作

这很简单。你检查过吗。jsfiddle.net/api/post/library/pure

抱歉@Riddi 'jsfiddle' 的链接对我不起作用

即使我现在也无法访问它。我猜有关此的所有详细信息都在官方文档站点上进行了更新。但是您是否尝试过我在答案中编辑的上述方式？？？跨度>

我这里没有使用简单的 el-table。我在“vue-data-tables”库中使用数据表。因为 el-table 不完全支持分页。对于分页，我更喜欢数据表njleonzhang.com/vue-data-tables/#/en-us/actionBar，因为我必须修改行颜色