wl vue select
1.0.0
Vue 프레임워크에 대한 모든 선택 항목이 포함된 트리 드롭다운 상자 및 일반 드롭다운 상자입니다.
Vue 프레임워크용 트리 드롭다운 상자와 모두 선택이 가능한 일반 드롭다운 상자입니다.
이 구성 요소는 모두 선택 드롭다운 상자와 트리 드롭다운 상자 기능을 제공합니다.
wlVueSelect 모든 선택 기능과 기본 선택 기능을 제공하는 elementUi의 el-select 구성 요소를 기반으로 하는 캡슐화된 보조 드롭다운 상자입니다.
wlTreeSelect 는 트리 데이터 지원 및 기본 선택 기능을 제공하는 elementUi의 el-tree 구성 요소를 기반으로 하는 캡슐화된 보조 드롭다운 상자입니다.
이 두 가지 요구 사항은 매우 일반적이므로 별도의 플러그인으로 출시됩니다.
엘-선택
0.4.8 트리 드롭다운 상자에서 모든 하위 노드를 선택한 경우 상위 노드를 취소할 수 없는 문제를 수정했습니다.
npm i wl-vue-select --save
또는
npm i wl-vue-select -S
사용
import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
<wlVueSelect
v-model="value"
:props="props"
:data="data"
multiple
default-select
></wlVueSelect>
<p>----------分割线------------</p>
<wlTreeSelect
leaf
width="240"
checkbox
:data="treeData"
@change="hindleChanged"
v-model="selected"
></wlTreeSelect>
data() {
return {
value: [], // 选中值
data: [
{
id: 1,
name: "海边"
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
], // 数据
props: {
label: "name",
value: "id"
}, // 配置
treeData: [
{
id: "love",
name: "所有和你走过的风光",
children: [
{
id: 1,
name: "海边",
children: [
{
id: 5,
name: "蓬莱",
}
]
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
]
}
],
selected: [ "1" ]// 树下拉框选中数据
};
},
methods: {
hindleChanged(val){
console.log(val,2)
console.log(this.selected)
}
},
| 일련번호 | 매개변수 | 설명하다 | 유형 | 선택적 값 | 기본값 |
|---|---|---|---|---|---|
| 1 | 데이터 | 옵션 선택적 목록 데이터 | 정렬 | - | - |
| 2 | 소품 | 구성 항목: 이름을 표시하는 라벨 필드와 값을 바인딩하는 값 필드 | 물체 | - | { 라벨: "라벨", 값: "값" } |
| 3 | 표시전체 | 사용 가능한 옵션이 여러 개 있는 경우全选옵션을 표시합니다. | 숫자 | - | 1 |
| 4 | defaultSelect[구식] | 기본 선택 활성화 여부.全部활성화하면 모두 선택되고, 전부가 아닌 경우 첫 번째 항목이 선택됩니다. (이 기능을 활성화할 때 v-model에 초기값을 할당하지 마십시오) | 부울 | - | 거짓 |
| 5 | 다른 | el-select가 제공하는 기타 매개변수 | - | - | - |
| 6 | 노드키 | 트리 드롭다운 상자를 사용할 때 키를 사용하여 데이터를 구문 분석해야 합니다. | 끈 | - | ID |
| 7 | 선택됨[구식] | 트리 드롭다운 박스 이용 시 선택한 데이터를 바인딩합니다. [현재는 v-model로 변경됨] | 문자열-숫자-배열-객체 | - | - |
| 8 | 체크박스 | 트리 드롭다운 박스 이용 시 다중 선택 활성화 여부 | 부울 | - | 거짓 |
| 9 | 너비 | 트리 드롭다운 상자를 사용할 때 너비, 기본 단위는 px입니다. | 문자열 번호 | - | 240 |
| 10 | 잎 | 트리 드롭다운 상자에서 리프 노드만 선택할 수 있는지 여부 | 부울 | - | 거짓 |
| 11 | 방아쇠 | 트리 드롭다운 상자를 사용할 경우 트리거링 방법은 다음과 같습니다. | 끈 | 클릭/포커스/호버/수동 | 딸깍 하는 소리 |
| 12 | v-모델 | 일반 및 트리 드롭다운 상자 바인딩 값은 일반 양식 요소와 동일하게 사용됩니다. | 문자열-숫자-배열-객체 | - | - |
| 13 | 장애가 있는 | 드롭다운 상자를 비활성화할지 여부 | 부울 | - | 거짓 |
| 14 | 지금 랩 | 여러 줄 표시를 허용하지 않을지 여부입니다. true인 경우 한 줄만 표시됩니다. | 부울 | - | 거짓 |
| 15 | noChecked닫기 | 다중 선택 시 모두 선택 취소 시 옵션 영역을 자동으로 닫을지 여부 | 부울 | - | 거짓 |
| 16 | 크기 | 크기, 사용법은 elementui와 동일 | 끈 | - | 중간 |
| 17 | 기본확장모두 | 트리 형태에서는 기본적으로 모든 옵션을 확장할지 여부 | 부울 | - | 진실 |
| 18 | 기본확장키 | 트리 형태에서는 기본적으로 노드 키가 확장됩니다. | 정렬 | - | - |
| 19 | 필터링 가능 | 검색 기능 활성화 여부(트리 드롭다운 박스 추가 시 일반 드롭다운 박스와 동일한 기능을 갖습니다) | 부울 | - | 거짓 |
| 20 | 필터Fnc | 트리 모양에서 선택적으로 검색 논리를 사용자 정의할 수 있습니다. 통과하지 못한 경우 검색은 props의 레이블에 해당하는 필드를 기반으로 합니다. 함수(값,데이터) | 기능 | - | - |
| 스물하나 | 엄격하게 확인 | 나무 모양에서는 부모와 자식이 관련이 없는지 여부 | 부울 | - | 거짓 |
| 스물 둘 | ExpandOnClickNode | 트리 모양에서 노드를 클릭하면 확장되거나 축소될 수 있습니다. | 부울 | - | 거짓 |
| 스물셋 | checkOnClickNode | 노드를 클릭할 때 노드를 선택할지 여부, 기본값은 false입니다. 즉, 확인란을 클릭할 때만 노드가 선택됩니다. | 부울 | - | 거짓 |
| 일련번호 | 이름 | 설명하다 | 매개변수 |
|---|---|---|---|
| 1 | 닫기옵션 | 트리 드롭다운 상자의 옵션 영역을 닫습니다. | - |
0.5.8 트리 드롭다운 상자에 부모-자식 독립 구성 추가
0.5.5 트리 드롭다운 상자의 초기 바인딩 값이 수직 중심 스타일을 수정한 단순 배열인 경우 자동 선택 논리 오류가 수정되었습니다.
0.5.4 처음 모든 데이터를 선택하면 '전체'가 표시되지 않고 각 항목이 표시 영역에 나열되는 현상을 수정했습니다.
0.5.3 필요에 따라 도입을 추가하기 위해 구성 요소 이름을 조정합니다.
0.5.2 트리 드롭다운 상자 최적화 및 검색 및 사용자 정의 검색 기능 추가
0.5.1 트리 드롭다운 상자를 최적화하고 옵션이 과도한 효과를 표시합니다.
0.5.0 트리 드롭다운 상자 defaultExpandAll, defaultExpandedKeys 필드를 추가했습니다.
0.4.9 트리 드롭다운 박스의 옵션 영역을 닫는 closeOptions 메소드 추가
0.4.8 트리 드롭다운 상자에서 모든 하위 노드를 선택한 경우 상위 노드를 취소할 수 없는 문제를 수정했습니다.
0.4.7 트리 드롭다운 상자 최적화 및 el-select의 축소 태그 지원
0.4.6 트리 드롭다운 상자를 최적화하고 크기 속성을 유효하게 만듭니다.
0.4.5 트리 드롭다운 상자 자리 표시자를 최적화하고 모두 선택 취소되었을 때 옵션을 닫는 매개변수 관리를 추가합니다.
0.4.2 트리 드롭다운 상자를 최적화하고 여러 행의 필드를 허용하지 않을지 여부를 추가합니다.
0.4.1 트리 드롭다운 상자 최적화 및 비활성화된 필드 추가
0.3.9 전달된 선택된 데이터가 복잡한 배열인 경우 기본적으로 ID를 추출하도록 트리 드롭다운 상자를 최적화합니다.
0.3.8 트리 드롭다운 박스 다중 선택 시, 표시 영역만 지워지고, 데이터가 비어 있을 때 트리 체크박스는 지워지지 않는 현상을 수정했습니다.
0.3.7 트리 드롭다운 상자 선택 시 리프 필드에 따라 하위 노드만 선택할지 여부를 수정합니다.
0.3.5 트리 드롭다운 상자 라디오 선택의 기본 선택 결함 수정[바운드 값이 배열인 경우]
0.3.4 트리 드롭다운 상자 el-tree의 기본 선택 필드가 비어 있고 getNodes 메소드도 마지막 값을 얻을 수 있는 문제를 수정했습니다. 업데이트된 rademe 예제입니다.
0.3.3 트리 드롭다운 상자에서 다중 선택이 활성화된 경우 무한 루프 문제를 수정하고 다중 선택이 활성화된 경우 리프 노드만 반환할지 여부를 결정하도록
leaf필드를 최적화했습니다.
0.3.2 트리 드롭다운 상자가 가로로 확장되면 표시되지 않는 문제 최적화
0.3.0 트리 드롭다운 상자 최적화 및 트리거 표시 모드 필드 추가
0.2.7 트리 드롭다운 상자의 단일 선택을 최적화할 때 선택적 수준이 추가되고, 트리의 단일 선택이 최적화될 때 리프 노드만 선택할 수 있는지 여부를 설정하는
leaf매개변수가 추가됩니다. 객체 유형이 기본적으로 선택되었을 때의 효과
0.2.5 트리 드롭다운 상자 필터링 알고리즘을 최적화하고, 사용 가능한 옵션이 너무 길 때 스크롤 효과를 높이기 위해 트리 드롭다운 상자를 최적화합니다.
0.2.4 showTotal이 데이터 길이보다 클 때 비어있는 문제를 수정했습니다.
0.2.3 업데이트된 예시
0.2.2 트리 드롭다운 상자 추가
0.1.2 알고리즘 업데이트, 전체 선택에서 단일 선택으로 전환 시 전체 선택 옵션을 수동으로 취소할 필요 없음
0.1.0이 처음으로 출시되었으며 el-select 기반의 전체 선택 기능과 기본 선택 기능이 추가되었습니다.
