alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] TreeSelect: active-id support sync modifier (#4133)

Browse Source
This commit is contained in:
neverland
2019-08-16 20:20:14 +08:00
committed by GitHub
parent 85356ac302
commit a6b256aa01
4 changed files with 147 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tree-select/demo/index.vue
+115 -103
View File
@@ -3,18 +3,16 @@
<demo-block :title="$t('radioMode')">
<van-tree-select
:items="items"
:active-id.sync="activeId"
:main-active-index.sync="mainActiveIndex"
:active-id="activeId"
@itemclick="onItemClick"
/>
</demo-block>
<demo-block :title="$t('multipleMode')">
<van-tree-select
:items="items"
:active-id.sync="activeIds"
:main-active-index.sync="mainActiveIndex2"
:active-id="activeIds"
@itemclick="onItemClick2"
/>
</demo-block>
</demo-section>
@@ -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')
}
];
}
}
};