diff --git a/src/tree-select/README.md b/src/tree-select/README.md index fcca0c24a..06e63cb14 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -16,10 +16,8 @@ Vue.use(TreeSelect); ```html ``` @@ -29,16 +27,8 @@ export default { return { items, activeId: 1, - mainActiveIndex: 0, + mainActiveIndex: 0 }; - }, - methods: { - onClickNav(index) { - this.mainActiveIndex = index; - }, - onClickItem(data) { - this.activeId = data.id; - } } } ``` @@ -48,10 +38,8 @@ export default { ```html ``` @@ -60,24 +48,9 @@ export default { data() { return { items, - activeIds: 1, - mainActiveIndex: 0, + activeIds: [1, 2], + 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); - } - } } } ``` diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index faa55bac8..7d33f1e5d 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -13,12 +13,13 @@ Vue.use(TreeSelect); ### 单选模式 +`item`为分类显示所需的数据，数据格式见下方示例。`main-active-index`表示左侧高亮选项的索引，`active-id`表示右侧高亮选项的 id + ```html ``` @@ -30,23 +31,19 @@ export default { activeId: 1, mainActiveIndex: 0 }; - }, - methods: { - onClickItem(data) { - this.activeId = data.id; - } } } ``` ### 多选模式 +`active-id`为数组格式时，可以选中多个右侧选项 + ```html ``` @@ -55,21 +52,9 @@ export default { data() { return { items, - activeIds: 1, - mainActiveIndex: 0, + activeIds: [1, 2], + mainActiveIndex: 0 }; - }, - methods: { - onClickItem(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/demo/index.vue b/src/tree-select/demo/index.vue index b5d3d0133..90ca17fc8 100644 --- a/src/tree-select/demo/index.vue +++ b/src/tree-select/demo/index.vue @@ -3,18 +3,16 @@ @@ -30,40 +28,53 @@ export default { group4: '福建', radioMode: '单选模式', multipleMode: '多选模式', - city1: [{ - text: '杭州', - id: 1 - }, { - text: '温州', - id: 2 - }, { - text: '宁波', - id: 3, - disabled: true - }, { - text: '义乌', - id: 4 - }], - city2: [{ - text: '南京', - id: 5 - }, { - text: '无锡', - id: 6 - }, { - text: '徐州', - id: 7 - }, { - text: '苏州', - id: 8 - }], - city3: [{ - text: '泉州', - id: 9 - }, { - text: '厦门', - id: 10 - }] + city1: [ + { + text: '杭州', + id: 1 + }, + { + text: '温州', + id: 2 + }, + { + text: '宁波', + id: 3, + disabled: true + }, + { + text: '义乌', + id: 4 + } + ], + city2: [ + { + text: '南京', + id: 5 + }, + { + text: '无锡', + id: 6 + }, + { + text: '徐州', + id: 7 + }, + { + text: '苏州', + id: 8 + } + ], + city3: [ + { + text: '泉州', + id: 9 + }, + { + text: '厦门', + id: 10 + } + ] }, 'en-US': { group1: 'All', @@ -72,40 +83,53 @@ export default { group4: 'Group3', radioMode: 'Radio Mode', multipleMode: 'Multiple Mode', - city1: [{ - text: 'Delaware', - id: 1 - }, { - text: 'Florida', - id: 2 - }, { - text: 'Georqia', - id: 3, - disabled: true - }, { - text: 'Indiana', - id: 4 - }], - city2: [{ - text: 'Alabama', - id: 5 - }, { - text: 'Kansas', - id: 6 - }, { - text: 'Louisiana', - id: 7 - }, { - text: 'Texas', - id: 8 - }], - city3: [{ - text: 'Alabama', - id: 9 - }, { - text: 'Kansas', - id: 10 - }], + city1: [ + { + text: 'Delaware', + id: 1 + }, + { + text: 'Florida', + id: 2 + }, + { + text: 'Georqia', + id: 3, + disabled: true + }, + { + text: 'Indiana', + id: 4 + } + ], + city2: [ + { + text: 'Alabama', + id: 5 + }, + { + text: 'Kansas', + id: 6 + }, + { + text: 'Louisiana', + id: 7 + }, + { + text: 'Texas', + id: 8 + } + ], + city3: [ + { + text: 'Alabama', + id: 9 + }, + { + text: 'Kansas', + id: 10 + } + ] } }, @@ -120,37 +144,25 @@ export default { computed: { items() { - return [{ - text: this.$t('group1'), - children: [...this.$t('city1'), ...this.$t('city2')] - }, { - text: this.$t('group2'), - children: this.$t('city1') - }, { - text: this.$t('group3'), - children: this.$t('city2') - }, { - text: this.$t('group4'), - disabled: true, - children: this.$t('city3') - }]; - } - }, - - methods: { - onItemClick(data) { - this.activeId = data.id; - }, - - onItemClick2(data) { - const { id } = data; - const { activeIds } = this; - - if (activeIds.indexOf(id) !== -1) { - activeIds.splice(activeIds.indexOf(id), 1); - } else { - activeIds.push(id); - } + return [ + { + text: this.$t('group1'), + children: [...this.$t('city1'), ...this.$t('city2')] + }, + { + text: this.$t('group2'), + children: this.$t('city1') + }, + { + text: this.$t('group3'), + children: this.$t('city2') + }, + { + text: this.$t('group4'), + disabled: true, + children: this.$t('city3') + } + ]; } } }; diff --git a/src/tree-select/index.tsx b/src/tree-select/index.tsx index e8c4a6508..b08bd0340 100644 --- a/src/tree-select/index.tsx +++ b/src/tree-select/index.tsx @@ -18,10 +18,12 @@ export type TreeSelectChildren = { disabled?: boolean; }; +export type TreeSelectActiveId = number | string | (number | string)[]; + export type TreeSelectProps = { height: number | string; items: TreeSelectItem[]; - activeId: number | string | (number | string)[]; + activeId: TreeSelectActiveId; mainActiveIndex: number; }; @@ -41,7 +43,6 @@ function TreeSelect( const selectedItem: Partial = items[mainActiveIndex] || {}; const subItems = selectedItem.children || []; - const isMultiple = Array.isArray(activeId); function isActiveItem(id: number | string) { @@ -91,7 +92,21 @@ function TreeSelect( ]} onClick={() => { if (!item.disabled) { + let newActiveId: TreeSelectActiveId = item.id; + if (isMultiple) { + newActiveId = (activeId as (string | number)[]).slice(); + + const index = newActiveId.indexOf(item.id); + + if (index !== -1) { + newActiveId.splice(index, 1); + } else { + newActiveId.push(item.id); + } + } + emit(ctx, 'click-item', item); + emit(ctx, 'update:active-id', newActiveId); // compatible for old usage, should be removed in next major version emit(ctx, 'itemclick', item);