[vue] bootstrap-vue의 b-table 사용할 때 필드 사이즈 조정

b-table 컴포넌트 사용 시 필드마다 사이즈 조정하기

b-table이 보다 편리하게 테이블을 생성할 수 있도록 많은 옵션을 제공하지만, 별도로 컬럼사이즈를 조절할 수 있는 방법이 없다.

컬럼마다 style 바인딩 해주기에는 너무 번거롭고 테이블 수도 많아서 쉽지 않다.

그래서 나는 thClass를 활용하기로 했다.

 

테이블을 사용하는 화면에서 b-table 컴포넌트를 바로 사용하는게 아니라, Table.vue 라는 컴포넌트로 한번 더 감싸주었다.

소스코드는 다음과 같다.

SomeServices.vue

<template>
  <div class="animated fadeIn">
    <b-row>
      <b-col lg="12">
        <my-table :table-data="items" :fields="fields" fixed hover></c-table>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import myTable from '@/views/base/Table'
export default {
  name: 'SomeServices',
  components: {myTable},
  data() {
    return {
      items: new Array(),
      fields: [
        { key: 'serviceId', label: '서비스 ID', sortable: true, thClass: 'w30'},
        { key: 'serviceNm', label: '서비스명', sortable: true, thClass: 'w30'},
        { key: 'serviceDesc', label: '서비스상세', thClass: 'w30'},
        { key: 'useYn', label: '사용여부', sortable: true, thClass: 'w10'},
      ],
    };
  },
};
</script>

<template>
  <b-card>
    <div slot="header" v-html="title"></div>
    <b-table thead:dark="dark" :hover="hover" :striped="striped" :bordered="bordered" :per-page="perPage"
             :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" 
             @row-clicked="rowClicked">
    </b-table>
    <nav>
      <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
    </nav>
  </b-card>
</template>

<script>
export default {
  name: 'my-table',
  inheritAttrs: false,
  props: {
    caption: {
      type: String,
      default: 'Table'
    },
    hover: {
      type: Boolean,
      default: false
    },
    striped: {
      type: Boolean,
      default: false
    },
    bordered: {
      type: Boolean,
      default: false
    },
    small: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: [Array, Function],
      default: () => []
    },
    fields: {
      type: [Array, Object],
      default: () => []
    },
    perPage: {
      type: Number,
      default: 5
    },
    dark: {
      type: Boolean,
      default: false
    },
    footClone: {
      type: Boolean,
      default: false
    },
  },
  data: () => {
    return {
      currentPage: 1,
      busy: false,
    }
  },
  watch: {
    currentPage(pageNum){
      this.busy = true;
      this.$emit('page-changed', {'pageNum': pageNum, 'pageSize': this.perPage});
    }
  },
  computed: {
    items: function() {
      const items =  this.tableData;
      this.busy = false;
      return Array.isArray(items) ? items : items();
    },
    totalRows: function () { return this.getRowCount() },
    title: function() { return '<i class=\'fa fa-align-justify\'> ' + this.caption + ' </i>'; }
  },
  methods: {
    getBadge (status) {
      return status === 'Y' ? 'success'
        : status === 'N' ? 'secondary' : 'warning'
    },
    getRowCount: function () {
      return this.items.length
    },
    rowClicked (item) {
      this.$emit('row-clicked', item);
    }
  }
}
</script>

 

 

/***********************************************************
    - w10 ~ w95 까지 5단위로 컬럼의 width길이 조절 가능하다.
    - fields 데이터를 테이블 컴포넌트로 바인딩할 때, thClass 속성에 w+숫자를 지정한다.
    - 숫자가 % 단위이기 때문에 숫자의 합을 100으로 맞춰주어야 한다.
    - 예시) fields: [{ key: 'sample', thClass: 'w15' }]
   ***********************************************************/
  table.b-table thead th.w10{
    width: 10%;
  }
  table.b-table thead th.w20{
    width: 20%;
  }
  table.b-table thead th.w30{
    width: 30%;
  }
  table.b-table thead th.w40{
    width: 40%;
  }
  table.b-table thead th.w50{
    width: 50%;
  }
  table.b-table thead th.w60{
    width: 60%;
  }
  table.b-table thead th.w70{
    width: 70%;
  }
  table.b-table thead th.w80{
    width: 80%;
  }
  table.b-table thead th.w90{
    width: 90%;
  }
  table.b-table thead th.w15{
    width: 15%;
  }
  table.b-table thead th.w25{
    width: 25%;
  }
  table.b-table thead th.w35{
    width: 35%;
  }
  table.b-table thead th.w45{
    width: 45%;
  }
  table.b-table thead th.w55{
    width: 55%;
  }
  table.b-table thead th.w65{
    width: 65%;
  }
  table.b-table thead th.w75{
    width: 75%;
  }
  table.b-table thead th.w85{
    width: 85%;
  }
  table.b-table thead th.w95{
    width: 95%;
  }