vue.js 테이블 예제

먼저 테이블을 동적인 테이블로 만들기 전에 테이블 자체를 만들어야 합니다. 우리가 사용할 데이터는 열이 있는 사용자 목록입니다: ID, 이름, 전화 및 직업. Vue.js를 사용하여 데이터를 렌더링하는 가장 간단한 방법은 v-for 지시문을 사용하여 목록 위에 HTML 템플릿을 반복하는 것입니다. NPM을 사용하지 않는 경우 dist/vue-tables-2.min.js에 있는 축소된 버전을 가져올 수도 있습니다. 프로젝트에 파일을 복사하여 가져오기: 반응형 테이블의 대안인 BootstrapVue에는 테이블을 시각적으로 누적된 형식으로 렌더링할 수 있는 누적 테이블 옵션(사용자 지정 SCSS/CSS 사용)이 포함됩니다. 누적된 prop을 true로 설정하여 모든 뷰포트에 누적된 테이블을 만듭니다. 또는 중단점 값 `sm`, `md`, `lg` 또는 `xl` 중 하나에 누적된 소품을 설정하여 테이블이 일반 테이블 형식으로 돌아가는 중단점을 설정합니다. Vue 2.x로 작동하는 버전을 찾고 있다면 vuetable-2 리포지토리로 이동하십시오. 그러나 설명서를 작업할 시간이 없습니다.

그러나 vuetable에 익숙할 정도로 익숙하면 크게 다르지 않아야합니다. 버전 1의 변경 사항에 대한 정보와 버전 1에서 업그레이드할 수 있는 방법에 대한 업그레이드 가이드에서 변경된 내용을 확인하십시오. 조밀한 소품을 사용하면 데이터 테이블에 대체 스타일을 제공 할 수 있습니다. Vue.js의 반응성에 기대면 제공하는 데이터에 맞게 재사용 가능한 테이블을 만드는 것이 얼마나 쉬운지 알 수 있습니다. 그래서 더 ado없이, 바로 그것에 들어갑시다. 이제 테이블을 가지고 노는 것은 꽤 멋진 것을 볼 수 있지만 한 방향으로만 정렬됩니다. 다른 방향으로 정렬하려면 정렬 방법으로 전달하는 클로저는 -1and 비자 를 반환한 1을 반환해야 하며, 기본적으로 순서를 뒤집습니다. 위의 필드 섹션에서 설명한 대로 열을 정렬 가능하게 만들 수 있습니다. 정렬 가능한 열 머리글을 클릭하면 열이 오름차순 방향(가장 작은 첫 번째)으로 정렬되지만 열을 다시 클릭하면 정렬 방향이 전환됩니다.

정렬할 수 없는 열을 클릭하면 정렬이 지워집니다. 소품 정렬 없음 재설정은 이 기능을 비활성화하는 데 사용할 수 있습니다. 기본 키가 제공되지 않으면 표시된 행의 인덱스 번호(즉, 표시된 테이블 행의 위치)에 따라 키를 자동으로 생성합니다. 이로 인해 이전 결과로 렌더링되는 하위 구성 요소/요소(예: Vue의 렌더 패치 최적화 루틴에서 다시 사용)와 같은 GUI 문제가 발생할 수 있습니다. 기본 키 열을 지정하면 이 문제가 완화될 수 있습니다(또는 사용자 지정 형식의 필드 슬롯에 요소/구성 요소에 고유한 :key를 배치할 수 있음). 앞으로 이것에 추가 할 수있는 더 많은 기능이 있습니다. 데이터의 하위 집합을 반복하는 것과 동일한 개념을 사용하여 검색 상자로 테이블을 필터링하거나 한 번에 한 페이지에 데이터를 비동기적으로 로드하고 행 속성을 대체하여 느리게 로드된 데이터 테이블을 얻을 수 있습니다. 정렬 방향 prop을 사용하여 정렬 가능한 열 헤더를 클릭할 때 오름차순 및 내림차순 정렬이 적용되는 순서를 제어합니다. 기본값 `asc`는 오름차순 정렬을 먼저 적용합니다(열이 현재 정렬되지 않은 경우). 동작을 반전하고 먼저 내림차순 방향으로 정렬하려면 `desc`로 설정합니다.

행을 고유하게 식별하는 필드 키를 식별하는 데 사용할 수 있는 추가 prop 기본 키를 제공합니다.

Por
agosto 2, 2019