b-table fields thClass or tdClass 적용방법을 알고싶어요
<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만 스타일 적용시키고 싶을때 방법 알려주시면 감사합니다~~
55글자 더 채워주세요.
1개의 답변이 있어요!
- {label: '행사명', key: 'title', sortable: true, filter: true, editable: true, class: 'bTableThStyle'}
tbClass -> class 로 변경하면 적용됩니다.
