Vue 영역 선택 구성 요소 튜토리얼에 대한 자세한 설명

본 글에서는 시·도 3단계 연계, 지역 데이터 추가 및 삭제 등 국가 지역 데이터 운영에 주로 사용되는 vue 지역 선택 컴포넌트를 소개한다. 꼭 필요한 vue 지역 선택 컴포넌트에 대한 자세한 튜토리얼을 참고해주세요

Overview

주로 도, 시, 군의 3단계 연계를 포함한 국가 지역 데이터 운영에 사용되며, 그리고 지역 데이터의 추가 및 삭제, 지역 데이터를 운용할 때 이전에도 나무 모양을 사용했는데 지역 선택 컴포넌트가 있는데, 대량의 지역 데이터를 운용할 때 렌더링 속도가 느려지므로 다른 데이터 표시 형태로 변경하고 상호작용 형태이므로 이 구성요소가 있습니다.

참고: 이 구성 요소는 vue.js 구성 요소입니다.

demo

데모하려면 여기를 클릭하세요

API

Props

매개변수	유형	설명
area	Array	수신 구성요소 영역 데이터

Events

이벤트 이름	매개변수	De 비문
선택	지역	컴포넌트 내 선택된 영역

자세한 설명

Props

area

area 파라미터는 필수 옵션으로 컴포넌트 초기화 시 영역 데이터를 나타내는 필수 옵션으로 비어 있을 수 있습니다. Area는 여러 객체를 포함하는 배열이며, 각 객체의 데이터 구조는 다음과 같습니다.

...
area: [
 {Name: '北京', ID: '01'},
 {Name: '南京', ID: '0401'},
 {Name: '西湖区', ID: '060105'}
],
...

나중에 실제 사용하면서 가끔 배경이 영역의 ID 값만 반환하는 경우가 있으므로 여기서는 최적화 후에는 다음과 같은 ID 값만 전달할 수 있습니다.

...
area: [
 {ID: '01'},
 {ID: '0401'},
 {ID: '060105'}
],
...

selected

selected는 구성 요소 외부에서 이 이벤트를 구독할 수 있습니다. 반환 값은 구성 요소에서 현재 선택한 모든 영역입니다. 반환 값은 영역 데이터를 포함하는 여러 개체로 구성된 배열입니다. 간단한 예

<p>
  <addressmap :area="area" @selected="selected"></addressmap>
</p>

설치 및 사용

npm install adc-addressmap전역 구성 요소로 사용하는 경우

//在项目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
若作为局部组件
//在某个组件中
import Addressmap from 'adc-addressmap'
export default {
...
 components: { Addressmap},
...
}

위 내용은 Vue 영역 선택 구성 요소 튜토리얼에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!