fixed #950
This commit is contained in:
梁灏
parent
a28bc982af
commit
933afc7a2c
3 changed files with 210 additions and 115 deletions
|
|
@ -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>-->
|
||||||
|
<!--<!–<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>–>-->
|
||||||
|
<!--</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>
|
<template>
|
||||||
<Row>
|
<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
v1: [],
|
data4: [
|
||||||
data2: [
|
|
||||||
{
|
{
|
||||||
value: 'zhejiang',
|
value: 'beijing',
|
||||||
label: '浙江',
|
label: '北京',
|
||||||
children: [],
|
children: [],
|
||||||
loading: false
|
loading: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'jiangsu',
|
value: 'hangzhou',
|
||||||
label: '江苏',
|
label: '杭州',
|
||||||
children: [{
|
children: [],
|
||||||
value: 'nanjing',
|
loading:false
|
||||||
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: {
|
methods: {
|
||||||
handleLoad () {
|
loadData (item, callback) {
|
||||||
this.data2[0].loading = !this.data2[0].loading;
|
|
||||||
},
|
|
||||||
loadData (item, cb) {
|
|
||||||
item.loading = true;
|
item.loading = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (item.value === 'zhejiang') {
|
if (item.value === 'beijing') {
|
||||||
item.children = [
|
item.children = [
|
||||||
{
|
{
|
||||||
value: 'hangzhou',
|
value: 'talkingdata',
|
||||||
label: '杭州',
|
label: 'TalkingData'
|
||||||
loading: false,
|
},
|
||||||
children: []
|
{
|
||||||
|
value: 'baidu',
|
||||||
|
label: '百度'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'sina',
|
||||||
|
label: '新浪'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
} else if (item.value === 'hangzhou') {
|
} else if (item.value === 'hangzhou') {
|
||||||
|
|
@ -136,11 +195,15 @@
|
||||||
{
|
{
|
||||||
value: 'ali',
|
value: 'ali',
|
||||||
label: '阿里巴巴'
|
label: '阿里巴巴'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '163',
|
||||||
|
label: '网易'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
item.loading = false;
|
item.loading = false;
|
||||||
cb();
|
callback();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -128,7 +128,9 @@
|
||||||
tmpSelected: [],
|
tmpSelected: [],
|
||||||
updatingValue: false, // to fix set value in changeOnSelect type
|
updatingValue: false, // to fix set value in changeOnSelect type
|
||||||
currentValue: this.value,
|
currentValue: this.value,
|
||||||
query: ''
|
query: '',
|
||||||
|
validDataStr: '',
|
||||||
|
isLoadedChildren: false // #950
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -270,9 +272,31 @@
|
||||||
},
|
},
|
||||||
handleFocus () {
|
handleFocus () {
|
||||||
this.$refs.input.focus();
|
this.$refs.input.focus();
|
||||||
|
},
|
||||||
|
// 排除 loading 后的 data，避免重复触发 updateSelect
|
||||||
|
getValidData (data) {
|
||||||
|
function deleteData (item) {
|
||||||
|
const new_item = Object.assign({}, item);
|
||||||
|
if ('loading' in new_item) {
|
||||||
|
delete new_item.loading;
|
||||||
|
}
|
||||||
|
if ('__value' in new_item) {
|
||||||
|
delete new_item.__value;
|
||||||
|
}
|
||||||
|
if ('__label' in new_item) {
|
||||||
|
delete new_item.__label;
|
||||||
|
}
|
||||||
|
if ('children' in new_item && new_item.children.length) {
|
||||||
|
new_item.children = new_item.children.map(i => deleteData(i));
|
||||||
|
}
|
||||||
|
return new_item;
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.map(item => deleteData(item));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
this.validDataStr = JSON.stringify(this.getValidData(this.data));
|
||||||
this.$on('on-result-change', (params) => {
|
this.$on('on-result-change', (params) => {
|
||||||
// lastValue: is click the final val
|
// lastValue: is click the final val
|
||||||
// fromInit: is this emit from update value
|
// fromInit: is this emit from update value
|
||||||
|
|
@ -332,8 +356,15 @@
|
||||||
data: {
|
data: {
|
||||||
deep: true,
|
deep: true,
|
||||||
handler () {
|
handler () {
|
||||||
|
const validDataStr = JSON.stringify(this.getValidData(this.data));
|
||||||
|
if (validDataStr !== this.validDataStr) {
|
||||||
|
this.validDataStr = validDataStr;
|
||||||
|
if (!this.isLoadedChildren) {
|
||||||
this.$nextTick(() => this.updateSelected());
|
this.$nextTick(() => this.updateSelected());
|
||||||
}
|
}
|
||||||
|
this.isLoadedChildren = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,7 @@
|
||||||
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;
|
||||||
this.handleTriggerItem(item);
|
this.handleTriggerItem(item);
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue