vueJ2에 페이지 수가 있지만 렌더링하지 못한 요소-ui 테이블의 행에 대한 배경색

vueJ2에 페이지 수가 있지만 렌더링하지 못한 요소-ui 테이블의 행에 대한 배경색

표의 결과 열에 따라 false의 경우 빨간색 배경 색상을 추가하고 true의 경우 녹색 배경을 추가해야 합니다. 요소를 사용하고 있습니다.UI + 데이터 테이블의 페이지 번호 + vuej.미리 결과 컬럼에 스타일 바인딩을 사용하여 컬럼 선언을 추가하려고 합니다.

마이템플릿코드

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

my custom Row Backgrond() 함수

 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)'};
      }
    },

테이블 전체에 녹색과 빨간색의 진가를 표시해야 합니다.잘 부탁드립니다.

이거 드셔보세요

: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)';
}

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 클래스 변경이 필요합니다.

언급URL : https://stackoverflow.com/questions/54553834/background-colors-to-rows-of-a-element-ui-table-with-pagination-in-vuejs-2-but-f