vue 및 element-ui 계단식 드롭 다운 박스 사용자 정의 템플릿

VUE 및 요소 UI 계단식 드롭 다운 박스 템플릿 사용자 정의에는 다음 단계가 필요합니다. 계단식 선택기의 작동 방식 및 VUE의 슬롯 메커니즘을 이해하십시오. El-Cascader에서 Scoped-Slot을 사용하여 사용자 정의 템플릿을 정의하십시오. 노드 및 데이터 변수를 사용하여 현재 노드 정보와 원래 데이터를 얻으십시오. 아이콘이나 다른 스타일과 같은 요구에 따라 데이터를 유연하게 표시합니다. 데이터 구조는 요소 -UI 요구 사항을 준수하고 스코어 슬롯을 올바르게 사용합니다. 비동기 데이터 로딩을 처리하기위한 상태 관리 도구와 함께. 브라우저 개발자 도구를 사용하여 문제를 찾으십시오.

Vue 및 Element-UI 계단식 드롭 다운 박스 사용자 정의 템플릿 : 깊은 사용자 정의, 데이터와 함께 재생

많은 친구들이 VUE 및 Element-UI를 사용하여 프로젝트를 수행 할 때 상황을 만날 것입니다. 요소 -UI가 제공하는 계단식 선택기 스타일은 디자인 드래프트와 일치하지 않습니다. 이 기사는 Element-UI의 캐스케이드 선택기 템플릿을 사용자 정의하는 방법을 심층적으로 살펴볼 것이며, 우회를 피하는 데 도움이되는 실제 프로젝트에서 개인적으로 만난 함정과 솔루션을 공유 할 것입니다.

결론에 대해 먼저 이야기 해 봅시다. 사용자 정의 템플릿의 핵심은 요소 -UI의 계단식 선택기가 어떻게 작동하는지 이해하는 것입니다. 복잡한 문서에 두려워하지 마십시오. 그렇게 어렵지 않습니다.

관련 지식 포인트를 간단히 검토해 봅시다. VUE의 구성 요소화 아이디어 및 VUE의 UI 구성 요소 라이브러리로서의 Element-UI는 계단식 선택기를 포함하여 다양한 구성 요소를 제공합니다. Element-UI의 캐스케이드 선택기 자체는 사용자 정의 템플릿의 기능을 제공합니다.

요소 -UI 캐스케이드 선택기의 핵심은 el-cascader 구성 요소로, props 의 props 속성을 통해 데이터 구조를 정의하고 scoped-slot 통해 표시된 템플릿을 사용자 정의 할 수 있습니다. 이 부분은 공식 요소 -UI 문서에서 사용할 수 있지만 문서는 종종 간단하며 실제 응용 프로그램에서 많은 자세한 문제가 발생합니다.

데이터 구조가 다음과 같습니다. 간단한 예를 살펴 보겠습니다.

 <code class="javascript">const data = [ { value: '1', label: '省份A', children: [ { value: '1-1', label: '城市A1' }, { value: '1-2', label: '城市A2' } ] }, { value: '2', label: '省份B', children: [ { value: '2-1', label: '城市B1' } ] } ];</code>

가장 쉬운 사용자 정의 템플릿은 el-cascader 에서 scoped-slot 사용합니다.

 <code class="vue"><el-cascader :options="data" :props="{ value: 'value', label: 'label', children: 'children' }"> <template node data> <span>{{ node.label }}</span> <!-- 显示节点标签--> </template> </el-cascader></code>

이 코드는 간단하며 각 노드의 레이블을 직접 표시합니다. 그러나 실제 애플리케이션에는 아이콘, 다른 스타일 등을 표시하는 것과 같은보다 복잡한 논리가 필요합니다. 여기서는 node 현재 노드의 모든 정보가 포함되어 data 원래 데이터입니다. 귀하의 요구에 따라 유연하게 사용할 수 있습니다.

이제 고급 사용법에 대해 이야기합시다. 예를 들어, 각 노드 뒤에 아이콘을 표시하려면 다음과 같이 쓸 수 있습니다.

 <code class="vue"><template node data> <span>{{ node.label }} <i class="el-icon-location"></i></span> </template></code>

예를 들어, 노드의 계층에 따라 다른 스타일을 표시하려고합니다.

 <code class="vue"><template node data> <span :class="{'province': node.level === 0, 'city': node.level === 1}"> {{ node.label }} </span> </template> <style scoped> .province { color: blue; } .city { color: green; } </style></code>

여기서 노드의 레벨을 결정하기 위해 node.level 사용했습니다. CSS 클래스 이름을 유연하게 사용하면 스타일을 쉽게 제어 할 수 있습니다.

마지막으로, 함정에 대한 트래프에 대한 경험에 대해 이야기 해 봅시다. 가장 일반적인 함정은 데이터 구조의 문제입니다. 데이터 구조가 요소 -UI의 요구 사항을 충족하는지 확인하십시오. 그렇지 않으면 오류가 표시됩니다. 또 다른 일반적인 함정은 scoped-slot 사용하는 것입니다. 올바르게 사용하려면 두 변수 node 와 data 의 의미를 이해해야합니다. 또한 Vuex 또는 기타 상태 관리 도구를 결합 해야하는 비동기 데이터 로딩을 처리하는 것을 잊지 마십시오. 디버깅 도구는 좋은 친구입니다. 브라우저 개발자 도구를 사용하는 법을 배우면 문제가 빨리 찾는 데 도움이 될 수 있습니다.

요컨대, 요소 UI 캐스케이드 선택기 템플릿을 사용자 정의하는 것은 어렵지 않습니다. 핵심은 작업 원칙을 이해하고 Vue의 기능을 유연하게 적용하는 것입니다. 더 많은 연습을하고 더 많은 것을 요약하면 커스텀 템플릿의 마스터가 될 수 있습니다!

위 내용은 vue 및 element-ui 계단식 드롭 다운 박스 사용자 정의 템플릿의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!