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

fixed #950

Browse source
This commit is contained in:
梁灏 2017-05-18 18:23:39 +08:00
parent a28bc982af
commit 933afc7a2c
3 changed files with 210 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

289
examples/routers/cascader.vue
View file

@ -1,134 +1,193 @@
<!--<template>-->
<!--<Row>-->
<!--<i-col span="4">-->
<!--<Button @click="handleLoad">load</Button>-->
<!--{{ v1 }}-->
<!--</i-col>-->
<!--<i-col span="4">-->
<!--<Cascader :data="data2" filterable v-model="v1" style="width: 200px;"></Cascader>-->
<!--&lt;!&ndash;<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>&ndash;&gt;-->
<!--</i-col>-->
<!--</Row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--v1: [],-->
<!--data2: [-->
<!--{-->
<!--value: 'zhejiang',-->
<!--label: '浙江',-->
<!--children: [],-->
<!--loading: false-->
<!--},-->
<!--{-->
<!--value: 'jiangsu',-->
<!--label: '江苏',-->
<!--children: [{-->
<!--value: 'nanjing',-->
<!--label: '南京',-->
<!--children: [-->
<!--{-->
<!--value: 'zhonghuamen',-->
<!--label: '中华门'-->
<!--},-->
<!--{-->
<!--value: 'v1',-->
<!--label: 'v111'-->
<!--},-->
<!--{-->
<!--value: 'v2',-->
<!--label: 'v2222'-->
<!--},-->
<!--{-->
<!--value: 'v3',-->
<!--label: 'v333'-->
<!--},-->
<!--{-->
<!--value: 'v4',-->
<!--label: 'v4444'-->
<!--},-->
<!--{-->
<!--value: 'v5',-->
<!--label: 'v555'-->
<!--},-->
<!--{-->
<!--value: 'v6',-->
<!--label: 'v666'-->
<!--},-->
<!--{-->
<!--value: 'v7',-->
<!--label: 'v777'-->
<!--}-->
<!--]-->
<!--}]-->
<!--}-->
<!--],-->
<!--data3: [{-->
<!--value: 'beijing',-->
<!--label: '北京',-->
<!--children: [-->
<!--{-->
<!--value: 'gugong',-->
<!--label: '故宫'-->
<!--},-->
<!--{-->
<!--value: 'tiantan',-->
<!--label: '天坛'-->
<!--},-->
<!--{-->
<!--value: 'wangfujing',-->
<!--label: '王府井'-->
<!--}-->
<!--]-->
<!--}, {-->
<!--value: 'jiangsu',-->
<!--label: '江苏',-->
<!--children: [-->
<!--{-->
<!--value: 'nanjing',-->
<!--label: '南京',-->
<!--children: [-->
<!--{-->
<!--value: 'fuzimiao',-->
<!--label: '夫子庙',-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--value: 'suzhou',-->
<!--label: '苏州',-->
<!--children: [-->
<!--{-->
<!--disabled: true,-->
<!--value: 'zhuozhengyuan',-->
<!--label: '拙政园',-->
<!--},-->
<!--{-->
<!--value: 'shizilin',-->
<!--label: '狮子林',-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--}]-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleLoad () {-->
<!--this.data2[0].loading = !this.data2[0].loading;-->
<!--},-->
<!--loadData (item, cb) {-->
<!--item.loading = true;-->
<!--setTimeout(() => {-->
<!--if (item.value === 'zhejiang') {-->
<!--item.children = [-->
<!--{-->
<!--value: 'hangzhou',-->
<!--label: '杭州',-->
<!--loading: false,-->
<!--children: []-->
<!--}-->
<!--];-->
<!--} else if (item.value === 'hangzhou') {-->
<!--item.children = [-->
<!--{-->
<!--value: 'ali',-->
<!--label: '阿里巴巴'-->
<!--}-->
<!--];-->
<!--}-->
<!--item.loading = false;-->
<!--cb();-->
<!--}, 1000);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Row>
<i-col span="4">
<Button @click="handleLoad">load</Button>
{{ v1 }}
</i-col>
<i-col span="4">
<Cascader :data="data2" filterable v-model="v1" style="width: 200px;"></Cascader>
<!--<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>-->
</i-col>
</Row>
<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>
</template>
<script>
export default {
data () {
return {
v1: [],
data2: [
data4: [
{
value: 'zhejiang',
label: '浙江',
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'jiangsu',
label: '江苏',
children: [{
value: 'nanjing',
label: '南京',
children: [
{
value: 'zhonghuamen',
label: '中华门'
},
{
value: 'v1',
label: 'v111'
},
{
value: 'v2',
label: 'v2222'
},
{
value: 'v3',
label: 'v333'
},
{
value: 'v4',
label: 'v4444'
},
{
value: 'v5',
label: 'v555'
},
{
value: 'v6',
label: 'v666'
},
{
value: 'v7',
label: 'v777'
}
]
}]
value: 'hangzhou',
label: '杭州',
children: [],
loading:false
}
],
data3: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
disabled: true,
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}]
]
}
},
methods: {
handleLoad () {
this.data2[0].loading = !this.data2[0].loading;
},
loadData (item, cb) {
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'zhejiang') {
if (item.value === 'beijing') {
item.children = [
{
value: 'hangzhou',
label: '杭州',
loading: false,
children: []
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
@ -136,11 +195,15 @@
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
cb();
callback();
}, 1000);
}
}