Vuetify 데이터 테이블에서 show-select로 그린 콤보 상자에width를 설정하는 방법
show-select
props를 통해 각 열에 체크 상자를 추가할 수 있습니다.이 열에 width를 설정하는 방법은 g도 나오지 않기 때문에 비망록입니다.
결론은
haeders
proops에 추가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>
확인란의 열 길이를 변경할 수 있습니다.이외에 기본적으로 페이지의 눈썹에 옵션을 전달할 수 있다.
Reference
이 문제에 관하여(Vuetify 데이터 테이블에서 show-select로 그린 콤보 상자에width를 설정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/azukiazusa/articles/244f12b6d2f0c8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)