drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Cascader

Browse source
This commit is contained in:
梁灏 2017-05-19 10:08:19 +08:00
parent 933afc7a2c
commit 03a904529d
2 changed files with 93 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
examples/routers/cascader.vue
View file

@ -147,9 +147,78 @@
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<Cascader :data="data4" :load-data="loadData"></Cascader>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data4: [-->
<!--{-->
<!--value: 'beijing',-->
<!--label: '北京',-->
<!--children: [],-->
<!--loading: false-->
<!--},-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州',-->
<!--children: [],-->
<!--loading:false-->
<!--}-->
<!--]-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--loadData (item, callback) {-->
<!--item.loading = true;-->
<!--setTimeout(() => {-->
<!--if (item.value === 'beijing') {-->
<!--item.children = [-->
<!--{-->
<!--value: 'talkingdata',-->
<!--label: 'TalkingData'-->
<!--},-->
<!--{-->
<!--value: 'baidu',-->
<!--label: '百度'-->
<!--},-->
<!--{-->
<!--value: 'sina',-->
<!--label: '新浪'-->
<!--}-->
<!--];-->
<!--} else if (item.value === 'hangzhou') {-->
<!--item.children = [-->
<!--{-->
<!--value: 'ali',-->
<!--label: '阿里巴巴'-->
<!--},-->
<!--{-->
<!--value: '163',-->
<!--label: '网易'-->
<!--}-->
<!--];-->
<!--}-->
<!--item.loading = false;-->
<!--callback();-->
<!--}, 1000);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>
<!--<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>-->
<div>
<Cascader :data="data" v-model="model" :load-data="loadData"></Cascader>
<ul>
<li v-for="(log, idx) in logs" :key="idx">{{log}}</li>
</ul>
</div>
</template>
<script>
export default {
@ -168,44 +237,37 @@
children: [],
loading:false
}
]
],
data: [],
model: [340000, 340100, 340104],
count: 1,
logs: []
}
},
methods: {
loadData (item, callback) {
this.logs.push(`第${this.count}次请求: ${item.value}`)
this.count++
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
if (item.value === 340000) {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
{value: 340100, label: "合肥市", children: [], loading: false}
];
} else if (item.value === 'hangzhou') {
} else if (item.value === 340100) {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
{value: 340104, label: "蜀山区"},
{value: 340111, label: "包河区"}
];
}
item.loading = false;
callback();
}, 1000);
}
},
mounted() {
this.data = [{value: 340000, label: "安徽省", children: [], loading: false}];
}
}
</script>

11
src/components/cascader/caspanel.vue
View file

@ -48,20 +48,23 @@
methods: {
handleClickItem (item) {
if (this.trigger !== 'click' && item.children) return;
this.handleTriggerItem(item);
this.handleTriggerItem(item, false, true);
},
handleHoverItem (item) {
if (this.trigger !== 'hover' || !item.children) return;
this.handleTriggerItem(item);
this.handleTriggerItem(item, false, true);
},
handleTriggerItem (item, fromInit = false) {
handleTriggerItem (item, fromInit = false, fromUser = false) {
if (item.disabled) return;
if (item.loading !== undefined && !item.children.length) {
const cascader = findComponentUpward(this, 'Cascader');
if (cascader && cascader.loadData) {
cascader.loadData(item, () => {
cascader.isLoadedChildren = true;
// todo
if (fromUser) {
cascader.isLoadedChildren = true;
}
this.handleTriggerItem(item);
});
return;