Vuetify 데이터 테이블에서 show-select로 그린 콤보 상자에width를 설정하는 방법

9223 단어 Vue.jsVuetifytech
Vuetify의 데이터 테이블show-selectprops를 통해 각 열에 체크 상자를 추가할 수 있습니다.
이 열에 width를 설정하는 방법은 g도 나오지 않기 때문에 비망록입니다.
결론은 haedersproops에 추가value: 'data-table-select'된 항목을 통해 설정할 수 있다는 것이다.
<template>
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    item-key="name"
    show-select
    class="elevation-1"
  >
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        selected: [],
        headers: [
	 // 以下を追加
	 {
            text: '',
            value: 'data-table-select',
            width: 1000
          },
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
	  // 以下省略
        ],
      }
    },
  }
</script>
확인란의 열 길이를 변경할 수 있습니다.

이외에 기본적으로 페이지의 눈썹에 옵션을 전달할 수 있다.
https://vuetifyjs.com/ja/api/v-data-table/#props-headers

좋은 웹페이지 즐겨찾기