Vuetify의 기본 너비 변경JS DataTable 셀

Vuetify의 기본 너비 변경JS DataTable 셀

나는 Vuetify를 사용하고 있다.JS 데이터 테이블과 나는 각 헤더 셀의 항목을 서로 가능한 가깝게 이동시켜야 한다.각 헤더에 너비를 추가하려고 했지만, 효과가 없었다. 아래에 미리 정의된 너비가 있는 것 같다.

업데이트: 각 행 간의 마진은 10px로 고정되어야 한다.

다음은 CodePen의 예:

https://codepen.io/anon/pen/ejEpKZ?&editors=101

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template slot="headerCell" slot-scope="props">
        <v-tooltip bottom>
          <span slot="activator">
            {{ props.header.text }}
          </span>
          <span>
            {{ props.header.text }}
          </span>
        </v-tooltip>
      </template>
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>

어떻게 하면 그들을 가깝게 할 수 있을까?

다른 빈 헤더를 추가하고 설정할 수 있음width빈 칸을 제외한 모든 열에서 최소 값(1%)까지 모든 빈 칸을 채운다.또한 비어 있는 항목을 추가해야 함td회색 행 구분선을 볼 수 있도록 테이블 본문 템플릿에 연결.

코드펜: https://codepen.io/anon/pen/WKXwOR을 참조하십시오.

아래와 같이 헤더로 너비를 설정할 수 있다.

headers: [
  { text: 'Dessert (100g serving)', value: 'name', width: '20%'},
  { text: 'Calories', value: 'calories', width: '50%' },
  { text: 'Fat (g)', value: 'fat' },
  { text: 'Carbs (g)', value: 'carbs', width: '200px' },
],

헤더에 추가(너비, 정렬)만 하십시오.

 <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
 </v-data-table>

머리글은 다음과 같다.

 header:[ {
        text: 'Dessert ',
          align: 'center',<------------to align left/center/right/
          value: 'name',
          width: "1%"//<-------------------asign width/
        },
   ]

헤더 옵션 설정:

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}

넌 CSS로 놀 수 있어. 그들의 클래스를 무시해.수정 시도td의width

여기 코드펜이 있다: https://codepen.io/anon/pen/gjxPMJ

또한 td:에 대한 텍스트를 왼쪽으로 정렬했다.<td class="text-xs-left">

원하는 것을 얻기 위해 너비 값을 가지고 놀기만 하면, 백분율도 사용할 수 있다.

참조URL: https://stackoverflow.com/questions/51527489/change-the-default-width-of-a-vuetifyjs-datatable-cell