반응형
Vuetify 2.x를 사용하여 테이블의 사용자 지정된 기본 행에 v-html을 사용하는 방법은?
나는 Vuetify 2.x를 사용하기 시작했다.
나는 테이블이 있고 어떤 컬럼은 html로 보여야 한다.
그래서 나는 아래 코드를 사용했다.
<v-data-table
:headers="headers"
:items="decorations"
:items-per-page-options="[20]"
class="elevation-1"
>
<template v-slot:items="props">
<tr>
<td class="text-sm-center">{{ props.item.name}}</td>
<td><span v-html="props.item.desc"></span></td>
</tr>
</template>
</v-data-table>
하지만 Vuetify 2.0부터 테이블이 바뀌었다.
<v-data-table
:headers="headers"
:items="decorations"
:items-per-page-options="[20]"
class="elevation-1"
>
</v-data-table>
더 이상 "템플릿"이 사용되지 않음.그래서 나는 "v-html"을 어떤 열에 어떻게 적용할 수 있는지 모르겠어.
이 예에 기초하여 다음과 같이 할 수 있다.
<v-data-table
:headers="headers"
:items="decorations"
:items-per-page-options="[20]"
class="elevation-1"
>
<template v-slot:item.desc="{ item }">
<span v-html="props.item.desc"></span>
</template>
</v-data-table>
반응형
'Programing' 카테고리의 다른 글
중앙 항목을 v-Flex로 시각화 (0) | 2022.03.06 |
---|---|
탐색 드로어의 재사용 가능한 구성 요소에서 소품 전송 (0) | 2022.03.06 |
Vuetify : 스로틀/차단 v-autocomplete (0) | 2022.03.06 |
Vuex를 사용하여 값을 설정하고 가져오려면 어떻게 해야 하는가? (0) | 2022.03.06 |
VueJS 2 : 구성 요소에서 Watch 메서 (0) | 2022.03.06 |