Programing

Vuetify 2.x를 사용하여 테이블의 사용자 지정된 기본 행에 v-html을 사용하는 방법은?

c10106 2022. 3. 6. 10:54
반응형

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>

참조URL: https://stackoverflow.com/questions/57206760/how-can-i-use-v-html-in-customized-default-rows-in-the-table-using-vuetify-2-x

반응형