2.0에서 선택한 데이터 테이블 항목을 페이지별로 확인하는 방법은 무엇입니까?
선택한 아이템을 Vuetify 데이터 테이블에서 페이지 단위로 가져오려고 합니다.뭔가 획기적인 변화가 생긴 것 같아요.다음 예시를 따릅니다.Vuetify DataTable 구성 요소에서 초기 '페이지당 행' 값을 설정하는 방법은 무엇입니까?
어느 쪽이
<v-data-table
:headers="headers"
:items="equipment"
class="elevation-1"
:rows-per-page-items="[15, 30, 50, 100]"
:pagination.sync="pagination">
그리고.
data() {
return {
pagination: {
rowsPerPage: 30
}, ...
}
}
현재 선택된 항목을 가져오려면rowsPerPage
다음과 같은 에러가 표시됩니다.[BREAKING] 'pagination' has been removed, use 'options' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide
업그레이드 가이드를 살펴보니 페이지 번호의 바닥글 제어 방법이나 선택한 페이지당 행을 동기화하는 방법이 거의 없었습니다.나는 그것을 사용해봤어요.options
여기 있는 테이블의 코드를 조사합니다.
단, 선택한 아이템 PerPage를 취득하는 방법은 매우 불명확합니다.options
perPage 항목을 설정할 때 반응적 지지대 역할을 하지 않는 것 같습니다.페이지 번호 부여와 동등한 현재 방법을 알고 있는 사람이 있다면.동기부여를 해주면 정말 감사하겠습니다.
vuetify 2.x를 사용하여 페이지당 항목 및 페이지당 행을 설정할 수 있습니다.
접근법은 다음과 같습니다.데이터 테이블 컴포넌트에 다음 속성을 사용합니다.
:items-per-page="5"
페이지당 항목을 직접 숫자로 설정하거나 데이터 반응성 속성에 할당하여 동적으로 업데이트할 수 있습니다.
또한 페이지당 행 수, 데이터 테이블에 이 속성 추가
: footer-props="footerProps"
스크립트 내
data(){
return {
footerProps: {'items-per-page-options': [15, 30, 50, 100]},
}
}
여기서 작업용 코드를 찾을 수 있습니다.
https://codepen.io/chansv/pen/gOOGPdR?editors=1010
작업 코드:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
:footer-props="footerProps"
@update:items-per-page="getItemPerPage"
></v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
footerProps: {'items-per-page-options': [5, 10,15, 30, 50, 100]},
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
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%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
methods: {
getItemPerPage(val) {
console.log(val);
},
}
})
간단한 방법::footer-props="{ itemsPerPageOptions: [25,50,100,-1]}"
-1은 옵션에 'All'을 추가하기 위한 것입니다.
기본적으로 모든 행을 표시하기 위한 새로운 옵션을 찾고 있는 사용자에게는 (- v2.2.11에서 작업)가 변경되었습니다.
옛날 방식
:pagination.sync="{ rowsPerPage: -1 }"
새로운 방법
:items-per-page="-1"
아이템과 행이 서로 바꿔서 사용되는지는 잘 모르겠지만, 이 때문에 잠시 당황했습니다.
언급URL : https://stackoverflow.com/questions/58636121/how-to-get-vuetify-data-table-selected-itemsperpage-in-2-0
'programing' 카테고리의 다른 글
명령줄에서 Maven Javadoc 플러그인을 비활성화하려면 어떻게 해야 합니까? (0) | 2022.07.29 |
---|---|
이 난독화된 C코드는 메인() 없이 실행된다고 주장하지만 실제로는 어떤 역할을 합니까? (0) | 2022.07.29 |
Vuex: 모든 상태 데이터를 로컬 속성에 매핑하려면 어떻게 해야 합니까? (0) | 2022.07.29 |
:: Java 8의 (이중 콜론) 연산자 (0) | 2022.07.29 |
Java에서 배열 정렬 (0) | 2022.07.28 |