diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 3c833a95d..2d4f46bcc 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -11,7 +11,7 @@ Vue.use(TreeSelect); ## Usage -### Basic Usage +### Radio Mode ```html +``` + +```javascript +export default { + data() { + return { + items, + activeIds: 1, + mainActiveIndex: 0, + }; + }, + methods: { + onClickNav(index) { + this.mainActiveIndex = index; + }, + onClickItem(data) { + const { id } = data; + const { activeIds } = this; + + if (activeIds.indexOf(id) !== -1) { + activeIds.splice(activeIds.indexOf(id), 1); + } else { + activeIds.push(id); + } + } + } +} +``` + ## API ### Props diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index 7b7bfd020..253066275 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -11,13 +11,13 @@ Vue.use(TreeSelect); ## 代码演示 -### 基础用法 +### 单选模式 ```html @@ -28,10 +28,8 @@ export default { data() { return { items, - // 左侧高亮元素的index - mainActiveIndex: 0, - // 被选中元素的id - activeId: 1 + activeId: 1, + mainActiveIndex: 0 }; }, methods: { @@ -45,6 +43,45 @@ export default { } ``` +### 多选模式 + +```html + +``` + +```javascript +export default { + data() { + return { + items, + activeIds: 1, + mainActiveIndex: 0, + }; + }, + methods: { + onClickNav(index) { + this.mainActiveIndex = index; + }, + onClickItem(data) { + const { id } = data; + const { activeIds } = this; + + if (activeIds.indexOf(id) !== -1) { + activeIds.splice(activeIds.indexOf(id), 1); + } else { + activeIds.push(id); + } + } + } +} +``` + ## API ### Props diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue index 9137e4957..50af58a06 100644 --- a/src/tree-select/demo/index.vue +++ b/src/tree-select/demo/index.vue @@ -1,6 +1,6 @@ @@ -20,6 +30,8 @@ export default { group2: '浙江', group3: '江苏', group4: '福建', + radioMode: '单选模式', + multipleMode: '多选模式', city1: [{ text: '杭州', id: 1 @@ -60,6 +72,8 @@ export default { group2: 'Group1', group3: 'Group2', group4: 'Group3', + radioMode: 'Radio Mode', + multipleMode: 'Multiple Mode', city1: [{ text: 'Delaware', id: 1 @@ -99,8 +113,10 @@ export default { data() { return { + activeId: 1, + activeIds: [1, 2], mainActiveIndex: 0, - activeId: 1 + mainActiveIndex2: 0 }; }, @@ -127,8 +143,24 @@ export default { onNavClick(index) { this.mainActiveIndex = index; }, + onItemClick(data) { this.activeId = data.id; + }, + + onNavClick2(index) { + this.mainActiveIndex2 = index; + }, + + onItemClick2(data) { + const { id } = data; + const { activeIds } = this; + + if (activeIds.indexOf(id) !== -1) { + activeIds.splice(activeIds.indexOf(id), 1); + } else { + activeIds.push(id); + } } } }; diff --git a/src/tree-select/index.tsx b/src/tree-select/index.tsx index 918f8402b..cb5060198 100644 --- a/src/tree-select/index.tsx +++ b/src/tree-select/index.tsx @@ -21,7 +21,7 @@ export type TreeSelectChildren = { export type TreeSelectProps = { height: number | string; items: TreeSelectItem[]; - activeId: number | string; + activeId: number | string | (number | string)[]; mainActiveIndex: number; }; @@ -42,6 +42,14 @@ function TreeSelect( const selectedItem: Partial = items[mainActiveIndex] || {}; const subItems = selectedItem.children || []; + const isMultiple = Array.isArray(activeId); + + function isActiveItem(id: number | string) { + return isMultiple + ? (activeId as (number | string)[]).indexOf(id) !== -1 + : activeId === id; + } + const Nav = items.map((item, index) => (
{item.text} - {activeId === item.id && ( + {isActiveItem(item.id) && ( )}
@@ -115,7 +123,7 @@ TreeSelect.props = { default: 300 }, activeId: { - type: [Number, String], + type: [Number, String, Array], default: 0 }, mainActiveIndex: { diff --git a/src/tree-select/test/__snapshots__/demo.spec.js.snap b/src/tree-select/test/__snapshots__/demo.spec.js.snap index 02eb7659f..13baf84b5 100644 --- a/src/tree-select/test/__snapshots__/demo.spec.js.snap +++ b/src/tree-select/test/__snapshots__/demo.spec.js.snap @@ -23,5 +23,27 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
所有城市
+
浙江
+
江苏
+
福建
+
+
+
杭州 +
+
温州 +
+
宁波
+
义乌
+
南京
+
无锡
+
徐州
+
苏州
+
+
+
`;