vue 및 요소 UI 계단식 드롭 다운 박스 페이징 기능

페이징 기능을 구현하기 위해 Vue 및 Element-UI 계단식 드롭 다운 박스는 다음과 같습니다. 페이징 매개 변수 : 서버를 요청할 때 페이징 매개 변수 (페이지 번호, 페이지 크기)를 전달하고 서버는 페인트 데이터와 총 데이터 볼륨을 반환합니다. 페이지 매김 구성 요소 : 요소 -UI의 el-pagination 구성 요소를 사용하여 페이징을 표시하고 총 데이터 볼륨을 기반으로 페이징 속성을 업데이트하십시오. 일반적인 오류 : 페이징 매개 변수가 올바르게 통과되고 처리되도록 비동기 요청 오류를 처리합니다. 성능 최적화 : 가상 스크롤, 데이터 캐싱 및 합리적인 데이터 구조 설계를 고려하십시오.

vue and element-ui 계단식 드롭 다운 박스 페이지 매김 : 성능과 경험의 게임

많은 학생들이 VUE 및 Element-UI를 사용하여 프로젝트를 수행 할 때 거대한 데이터 볼륨의 계단식 드롭 다운 상자를 만나게됩니다. 각 도시 아래에 수십 개의 도시와 수백 개의 지구와 카운티가 있다고 상상해보십시오. 모든 데이터가 계단식 드롭 다운 상자에 직접 채워져 있으면 브라우저가 고정되어 사용자 경험이 매우 열악 할 것입니다. 이것은 농담이 아닙니다. 따라서 Pagination은 고려해야 할 최적화 전략이되었습니다. 이 기사를 읽은 후에는 페이징 기능을 구현하는 방법을 배울 수있을뿐만 아니라 그 뒤에있는 성능 최적화 아이디어를 이해하여 일반적인 함정에 빠지는 것을 피할 수 있습니다.

기본 사항에 대해 먼저 이야기 해 봅시다. Element-UI의 el-cascader 구성 요소는 페이지 매김 자체를 지원하지 않습니다. 우리는 스스로해야하고 충분한 음식과 옷을 가져야합니다. 이를 위해서는 VUE의 반응성 메커니즘, 비동기 데이터 로딩 및 요소 -UI 구성 요소의 API에 대한 특정 이해가 필요합니다. 물론, 당신이 이것에 익숙하지 않다면 걱정하지 마십시오. 가장 이해하기 쉬운 방식으로 설명하려고 노력할 것입니다.

핵심은 데이터를 비동기로로드하는 방법에 있습니다. 우리는 처음부터 모든 데이터를로드 할 수는 없지만 사용자의 선택에 따라 다음 수준의 데이터를 점차적으로로드합니다. 이를 위해서는 영리한 데이터 구조와 요청 전략이 필요합니다. 나는 일반적으로 객체를 사용하여 모든 데이터를 키 값 쌍의 형태로 저장하고 키는 상위 ID이고 값은 자식 데이터 배열입니다. 예를 들어:

 <code class="javascript">this.data = { '1': [ // 省份ID为1的市级数据{ value: '101', label: '市A' }, { value: '102', label: '市B' }, // ... ], '101': [ // 市A的区县数据{ value: '10101', label: '区县A1' }, { value: '10102', label: '区县A2' }, // ... ], // ... };</code>

그런 다음 el-cascader 의 load 방법에서 서버는 현재 선택된 노드 ID에 기초하여 해당 데이터를 얻기 위해 비동기 적으로 요청됩니다. 여기서 페이지 매김의 열쇠는이 비동기 요청입니다.

 <code class="javascript">load(node, resolve) { const { value } = node; const pageSize = 20; // 每页显示20条数据const currentPage = node.currentPage || 1; // 当前页码this.$axios.get('/api/data', { params: { parentId: value, page: currentPage, pageSize } }) .then(response => { const { data, total } = response; node.total = total; // 更新总数据量，用于分页组件resolve(data); }) .catch(error => { console.error(error); resolve([]); // 请求失败，返回空数组}); }</code>

pageSize 및 currentPage 매개 변수를 보셨습니까? 이것은 페이지 매김의 본질입니다. 서버는 이러한 매개 변수에 따라 PAGED 데이터를 반환하고 총 데이터 total 을 반환하여 프론트 엔드가 PAGED 구성 요소를 표시 할 수 있도록해야합니다.

다음으로, 우리는 페이지 매김 구성 요소가 필요합니다. 요소 -UI와 함께 제공되는 el-pagination 구성 요소는이 시나리오에 매우 적합합니다. node.total 에 따라 Pagination 구성 요소의 속성을 동적으로 업데이트하면됩니다.

고급 사용법? 가상 스크롤 기술을 사용하여 성능을 향상시키는 것을 고려할 수 있습니다. 특히 데이터 양이 매우 크면 가상 스크롤은 모든 데이터를 렌더링하지 않고 현재 가시적 인 영역에서 데이터 만 렌더링하는 것을 피할 수 있습니다. 이는 성능이 크게 향상되었습니다. 물론 가상 스크롤을 구현하려면 더 많은 코드와 기술이 필요하므로 여기에서는 자세히 설명하지 않습니다.

일반적인 오류? 가장 일반적인 오류는 비동기 요청을 처리하는 것을 잊어 버리므로 페이지가 고정되거나 오류 메시지가 표시됩니다. 비동기 요청의 오류를 올바르게 처리하고 사용자 친화적 인 프롬프트를 제공하십시오. 페이징 매개 변수의 전송 및 처리도 있습니다. 조심하지 않으면 데이터 표시 오류가 발생합니다. 페이징 매개 변수의 정확성을 확인하려면 코드를주의 깊게 확인하십시오.

성능 최적화? 페이징 및 가상 스크롤 외에도 불필요한 네트워크 요청을 줄이기 위해 데이터 캐싱을 고려할 수도 있습니다. 합리적으로 데이터 구조를 설계하고 중복 데이터를 피하는 것도 성능 향상의 열쇠입니다. 코드 가독성도 중요하며 명확하고 이해하기 쉬운 코드는 유지 관리 및 최적화가 쉽습니다.

요컨대, VUE 및 Element-UI 계단식 드롭 다운 박스 페이지 매김은 성능 및 사용자 경험을 포괄적으로 고려해야하는 문제입니다. 완벽한 솔루션은 없으며 장단점을 측정 한 후 최상의 선택 만 있습니다. 이 기사 가이 문제를 더 잘 이해하고 해결하는 데 도움이되기를 바랍니다. 코드는 단지 도구 일 뿐이며, 더 중요한 것은 문제에 대한 이해와 문제 해결에 대한 생각입니다. 더 많은 연습과 생각을 통해서만 진정한 프로그래밍 마스터가 될 수 있습니다!

위 내용은 vue 및 요소 UI 계단식 드롭 다운 박스 페이징 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!