Javascript——if....else if .....简化

最新推荐文章于 2024-09-04 20:16:03 发布

studystudy。。

最新推荐文章于 2024-09-04 20:16:03 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_43551242/article/details/130148271

根据row的testOperator字段值，使用Vue.js的row-class-name属性动态设定表格行的背景色，如debug_onLine对应blue-row，debug_success对应success-row等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

element。table根据row的xxx字段判断展示不同的行的背景色

 <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 20px;"
      :cell-style="cellStyle"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
      :row-class-name="tableRowClassName"
    >
 </el-table>




    tableRowClassName({ row, rowIndex }) {
      if (row.testOperator === 'debug_begin') {
        return '';
      } else if (row.testOperator === 'debug_onLine') {
        return 'blue-row';
      } else if (row.testOperator === 'debug_success') {
        return 'success-row';
      } else if (row.testOperator === 'debug_reStart') {
        return 'orange-row';
      } else if (row.testOperator === 'debug_error') {
        return 'error-row';
      } else if (row.testOperator === 'debug_success_pass') {
        return 'success-row';
      } else if (row.testOperator === 'debug_reStart_reSet') {
        return 'orange-row';
      } else if (row.testOperator === 'debug_success_noSet') {
        return 'success-row';
      }
    },

简化对象key：value

 tableRowClassName({ row, rowIndex }) {
      let classRflect = {
        debug_begin: '',
        debug_onLine: 'blue-row',
        debug_success: 'success-row',
        debug_reStart: 'orange-row',
        debug_error: 'error-row',
        debug_success_pass: 'success-row',
        debug_reStart_reSet: 'orange-row',
        debug_success_noSet: 'success-row'
      };
      return classRflect[row.testOperator];
    },