[new feature] TreeSelect: support multiple select (#4130)

This commit is contained in:
neverland
2019-08-16 17:38:09 +08:00
committed by GitHub
parent a4f65f45c8
commit bfb3196438
5 changed files with 152 additions and 16 deletions
+43 -6
View File
@@ -11,13 +11,13 @@ Vue.use(TreeSelect);
## 代码演示
### 基础用法
### 单选模式
```html
<van-tree-select
:items="items"
:main-active-index="mainActiveIndex"
:active-id="activeId"
:main-active-index="mainActiveIndex"
@click-nav="onClickNav"
@click-item="onClickItem"
/>
@@ -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
<van-tree-select
:items="items"
:active-id="activeIds"
:main-active-index="mainActiveIndex"
@click-nav="onClickNav"
@click-item="onClickItem"
/>
```
```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