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>--> <!--</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> <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> </template>
<script> <script>
export default { export default {
@ -168,44 +237,37 @@
children: [], children: [],
loading:false loading:false
} }
] ],
data: [],
model: [340000, 340100, 340104],
count: 1,
logs: []
} }
}, },
methods: { methods: {
loadData (item, callback) { loadData (item, callback) {
this.logs.push(`第${this.count}次请求: ${item.value}`)
this.count++
item.loading = true; item.loading = true;
setTimeout(() => { setTimeout(() => {
if (item.value === 'beijing') { if (item.value === 340000) {
item.children = [ item.children = [
{ {value: 340100, label: "合肥市", children: [], loading: false}
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
]; ];
} else if (item.value === 'hangzhou') { } else if (item.value === 340100) {
item.children = [ item.children = [
{ {value: 340104, label: "蜀山区"},
value: 'ali', {value: 340111, label: "包河区"}
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
]; ];
} }
item.loading = false; item.loading = false;
callback(); callback();
}, 1000); }, 1000);
} }
},
mounted() {
this.data = [{value: 340000, label: "安徽省", children: [], loading: false}];
} }
} }
</script> </script>

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

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