Q. b-table fields thClass or tdClass 적용방법을 알고싶어요

라균2 2020. 01. 29.


<template>
 <b-table
   striped hover
   :fields="fields"
   :items="list"
   class="table"
 >
</template>
<style lang="scss" scoped>
  .table >>> .bTableThStyle {
    max-width: 12rem;
    text-overflow: ellipsis;
  }
</style>
<script lang="ts">
 import { Component, Vue, Watch } from "nuxt-property-decorator";
 @Component(...)
 export default class className extends Vue {
  fields = [
   {label: '행사번호', key: 'index', sortable: true, filter: true, editable: true},
   {label: '행사명', key: 'title', sortable: true, filter: true, editable: true, tbClass: 'bTableThStyle'},
  ];
 }
</script>

위 간략한 코드처럼 b-table 의 fields 에서 행사명에만 css를 먹이고싶어서 tbClass를 사용하여 적용시켜볼려했습니다.
( 참조 url : https://stackoverflow.com/questions/53744011/bootstrap-vue-table-td-element-styling)

그치만 적용이 안되어 질문올립니다.

fields 에 한 field만 스타일 적용시키고 싶을때 방법 알려주시면 감사합니다~~

공유하고 보상받기 ♥︎
댓글 0

1개의 답변이 있습니다.

질문자 & 큐레이터 채택
coolwine 답변자인증
2020. 01. 29
100%의 채택
{label: '행사명', key: 'title', sortable: true, filter: true, editable: true, class: 'bTableThStyle'}

tbClass -> class 로 변경하면 적용됩니다.

댓글 1
라균2 2020.01.29 06:23

<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" aria-label="Click to sort Ascending" aria-sort="none" class="bTableThStyle">행사명</th>

class로 변경 후 HTML에서 적용된건 보이지만 css가 안먹힙니다...