antd design table 줄 데이터 스타일 변경

antd Table 에는 rowClassName 방법 표 줄 의 클래스 이름 Function(record,index)이 있 습 니 다.string-->반환 형식 은 String 형식 입 니 다.
예:
import styless from './component/record.css';--->css 스타일 도입.

css:
.csbsTypes{
 font-family:    , "Open Sans", "  ";
 font-weight: bold;
 }

코드:

<Table
 title={()=><div style={{textAlign: 'center',backgroundColor:'#170A29'}}></div>}
 columns={R1columns}
 dataSource={this.state.RateData}
 pagination={false}
 rowClassName={(record, index) => record.csbsType ==='    '?'csbsTypes':''}-->  rowClassName      String  ，            ，         
/>

결 과 를 보 여 줍 니 다:csbsType=="범위 제한 없 음"의 이 줄 의 글꼴 은 굵 어 집 니 다."
추가 지식:vue 는 ant design table 구성 요소 에 클릭 줄(선택 줄)스타일 과 얼룩말 무늬 스타일 을 사용자 정의 합 니 다.
시작 에 쓰기:
element-ui 의 table 구성 요 소 는 몇 가지 속성 이 있 지만 ant-design 에 table 구성 요 소 는 없습니다.
예 를 들 면:
stripe:얼룩말 무늬 table 인지 여부 입 니 다.
highlight-current-row:현재 줄 을 강조 할 지 여부 입 니 다.
물론 여러 가지 다른 속성 이 있 지만 본 고 는 먼저 이 두 가지 만 말한다.element-ui 에'ant-design'이 있 는 이상 ant-design 의 table 구성 요 소 를 사용 할 때 이 두 가지 기능 을 실현 하려 면 어떻게 해 야 합 니까?
정 답 은 무침.기왕 그것 이 없 는 이상 스스로 써 라,즉 두 번 포장 하 는 것 이다.
ok,먼저 이 속성의 기능 을 실현 합 니 다:highlight-current-row.
highlight-current-row
우선,prop 변 수 를 정의 합 니 다:highlight CurrentRow;다른 prop 변 수 를 currentRow 로 정의 합 니 다.
그리고 watch 에서 currentRow 의 변 화 를 감청 합 니 다.currentRow 가 변 할 때마다 이전 선택 한 줄 과 현재 선택 한 줄 의 스타일 을 보 여 줍 니 다.

currentRow (val) {
   if (this.highlightCurrentRow) {
    this.renderRowStyleAfterRowClick(val)
   }
  }

highlightCurrentRow 가 true 일 때 만 새로운 스타일 을 렌 더 링 해 야 합 니 다.
renderRowStyleAfterRowClick：

//       ，        
  renderRowStyleAfterRowClick (currentRow) {
   const elements = document.getElementsByClassName('ant-table-row')
   const rowSelectionElement = document.getElementsByClassName('row-selection')
   //         ，         
   if (rowSelectionElement.length > 0) {
    rowSelectionElement[0].classList.remove('row-selection')
   }
   //               
   if (elements.length > 0) {
    const rowList = [...elements]
    rowList.find(t => t.dataset.rowKey === currentRow.id).classList.add('row-selection')
   }
  }

코드 는 사실 매우 간단 하 다.
표 현재 페이지 의 모든 row 요소(table 구성 요 소 는 현재 클릭 줄 의 원생 class 를 제공 하지 않 음)와 현재 선택 한 row 요 소 를 가 져 옵 니 다.
현재 선택 한 줄 이 있다 면 이전에 추 가 된 css class'row-selection'을 제거 하 십시오.
그리고 현재 선택 한 줄 에 class'row-selection'을 추가 합 니 다.
그것 은 여기에 의문 이 있 습 니 다.제 가 어떻게 해야만 현재 의 줄 을 찾 을 수 있 습 니까?table 구성 요 소 는 현재 선택 한 줄 의 class 를 제공 하지 않 았 습 니 다.(적어도 나 는 찾 지 못 했 습 니 다)모든 것 은 t 를 통 해 class name'ant-table-row'를 통 해 모든 row 를 가 져 온 다음 에 그 중에서 현재 클릭 한 줄 을 찾 을 수 있 습 니 다.
이 럴 때 중요 한 속성 을 이용 해 야 합 니 다:rowKey.
ant-design table 구성 요소 의 api 파일 맨 뒤에 있 는 주의 사항 을 기억 하 십 니까?

rowKey 는 데이터 열 을 지정 하 는 데 사 용 됩 니 다.즉,모든 줄 의 유일한 표지 입 니 다.그러면 하기 쉽 습 니 다.
table 구성 요 소 를 참조 할 때 rowKey 를 표 데이터 원본 의 메 인 키 로 설정 하면 요소 의 dataset 에서 rowKey 를 가 져 와 현재 클릭 줄 을 찾 을 수 있 습 니 다.
rowList.find(t => t.dataset.rowKey === currentRow.id)
그리고 이 요소 에 클 라 스'row-selection'을 동적 으로 추가 합 니 다.

//                      
.ant-table-row {
 &:hover > td {
  background-color: @background-color !important;
  color: #fff !important;
 }
 &.row-selection {
  background-color: @background-color !important;
  color: #fff !important;
 }
}

hover 시 행 스타일 을 설정 하 는 것 은 클릭 시 행 스타일 과 같 습 니 다.줄 을 클릭 하지 않 고 이 줄 이 멈 출 때 다른 스타일 이 나타 나 도록 하기 위해 서 입 니 다.똑 같이 설정 하지 않 으 려 면 줄 클릭 시의 hover 스타일 과 줄 클릭 시의 스타일 을 따로 설정 할 수 있 습 니 다.

//                      
.ant-table-row {
 &.row-selection {
  background-color: @background-color !important;
  color: #fff !important;
  &:hover > td {
    background-color: @background-color !important;
    color: #fff !important;
   }
 }
}

이렇게 해서 우리 의 목적 은 달성 되 었 다.
줄 을 클릭 할 때 currentRow 를 수정 합 니 다.table 구성 요소 내 부 는 watch 를 통 해 currentRow 의 변 화 를 감지 하면 스타일 을 바 꾸 는 방법 이 실 행 됩 니 다.

<s-table
    ref="table"
    size="default"
    rowKey="id"
    :columns="columns"
    :verticalScroll="false"
    :data="loadData"
    :stripe="true"
    :highlightCurrentRow="true"
    :currentRow="selectedCustomer"
    :customRow="rowClick">
...

rowClick: record => ({
    //   
    on: {
     click: () => {
      this.handleCurrentRowChanged(record)
     }
    }
   })

handleCustomerChanged (record) {
  this.selectedCustomer = record
}

이렇게 하면 돼.
stripe(얼룩말 무늬 줄)
줄 의 stripe 기능 을 실현 하 는 것 은 비교적 간단 하 다.
prop 변수 stripe 를 추가 합 니 다.구성 요소 의 update 함수 갈고리 에서 얼룩말 무늬 를 실현 하 는 방법 을 호출 하면 됩 니 다.

 updated () {
  if (this.stripe) {
   this.renderStripe()
  }
}

얼룩말 무늬 를 실현 하 는 방식 은 여러 가지 가 있 는데 여 기 는 전시 기간 중의 한 가지 만 보 여 준다.

//              
  renderStripe () {
   const table = document.getElementsByClassName('ant-table-row')
   if (table.length > 0) {
    const rowList = [...table]
    rowList.forEach(row => {
     const index = rowList.indexOf(row)
     if (index % 2 !== 0) {
      row.style.backgroundColor = '#f7f7f7'
     } else {
      row.style.backgroundColor = '#ffffff'
     }
    })
   }
  },

table 의 모든 줄 을 가 져 온 다음 줄 간격 을 두 고 다른 줄 배경 색 을 설정 하면 목적 을 달성 할 수 있 습 니 다.
다른 더 많은 방법 이 있 는 친구 들 은 보충 을 환영 합 니 다.
이상 의 antd design table 에서 한 줄 의 데 이 터 를 변경 하 는 스타일 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.