데이터 테이블(v-data-table) Vuetify Data Table - 특정 열의 값을 조건부로 스타일 지정하는 방법

데이터 테이블(v-data-table) Vuetify Data Table - 특정 열의 값을 조건부로 스타일 지정하는 방법

Vuetify Data Table(v-data-table 구성 요소)의 열에서 특정 값을 가장 쉽게 강조 표시하는 방법

예: 여기 첫 번째 예에서 다음과 같이 합시다: https://vuetifyjs.com/en/components/data-tables.

300보다 큰 Calculars 컬럼의 값을 볼드 및 빨간색 스타일로 자동 스타일링하는 방법

너는 그런 일을 할 수 있다.

    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.calories="{ item }">
        <div :class="getStyle(item.calories)">{{ item.calories }}</div>
      </template>
    </v-data-table>

그런 다음 스크립트에서 값을 자동으로 스타일링하는 메서드 "getStyle"을 추가할 수 있다.

methods: {
    getStyle (calories) {
      if (calories > 300) return 'red--text font-weight-bold'
      else return ''
    },
  },

여기 코드펜 예: https://codepen.io/guizboule/pen/LYPyWMV?&editable=true&editors=101

다른 솔루션을 원하는 경우, Vuetify는 칩 https://codepen.io/guizboule/pen/vYBmxwg?&editable=true&editors=101을 예로 들 수 있다.

참조URL: https://stackoverflow.com/questions/57671625/vuetify-data-table-v-data-table-how-to-conditionally-style-values-in-certain