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

bug fixed #6158

Browse source 
bug fixed #6158
This commit is contained in:
mo.duan 2019-09-05 16:25:57 +08:00
parent 6a7b6aab36
commit 8a93e8b53e
2 changed files with 121 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

174
examples/routers/cascader.vue
View file

@ -1,70 +1,60 @@
<template>
<div>
<Row>
<i-col span="18">
<i-button v-on:click="setValue">setValue</i-button>
</i-col>
<i-col span="4">
<Cascader :data="data" v-model="value1" transfer></Cascader>
</i-col>
</Row>
<Alert show-icon>#6158</Alert>
<Cascader :data="data" v-model="value" :load-data="loadData"></Cascader>
<Cascader :data="data2" v-model="value2" change-on-select :load-data="loadData" @on-change="handlerChange"></Cascader>
<p style="margin-top:2rem">异步加载数据同时赋初值会导致不能正确的显示</p>
<p>所有数据均相同，第二个级联增加change-on-select</p>
<p>第一个北京、故宫、故宫3级正常</p>
<p>第二个强制将值设置为['beijing']</p>
</div>
</template>
<script>
export default {
data () {
return {
value1: [],
value: ['beijing','gugong','gugong3'],
value2: ['beijing','gugong','gugong3'],
data: [{
value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',
value: 'beijing',
label: '北京',
children: [{
value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',
label: '故宫'
}, {
value: 'tiantan',
label: '天坛'
}, {
value: 'wangfujing',
label: '王府井'
}]
}, {
value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',
label: '江苏',
children: [{
value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',
label: '南京',
children: [{
value: '44736384-0ede-41ba-bf7a-59c84241851a',
label: '夫子庙中国第一庙来自南京',
children:[{
value: '44736384-0ede-41ba-bf7a-59c84241851c',
label:'自定义产品系统来自黑龙江地区'
}]
}]
}, {
value: 'suzhou',
label: '苏州',
children: [{
value: 'zhuozhengyuan',
label: '拙政园',
}, {
value: 'shizilin',
label: '狮子林',
}]
}],
level: 1,
loading: false,
children: [
]
}],
data2: [{
value: 'beijing',
label: '北京',
level: 1,
loading: false,
children: [
]
}]
}
},
methods: {
setValue() {
var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";
var x = v.split(',')
var x1 = x[0].toString();
var x2 = x[1].toString();
var x3 = x[2].toString();
this.value1 = x;
handlerChange(val,selectData){
console.log(val,selectData,'-----val');
},
loadData(item,callback){
item.loading = true;
setTimeout(() => {
if(item.level === 1){
item.children=[
{label: '故宫',value:'gugong',level: 2,loading: false,children:[]},
{label: '故宫2',value:'gugong2',level: 2,children:[]}
];
}else if(item.level === 2){
item.children=[{label: '故宫3级',value:'gugong3',level: 3}]
}
item.loading = false;
callback();
}, 600);
}
},
mounted () {
@ -72,6 +62,80 @@
}
}
</script>
<style>
<!--<template>-->
<!-- <div>-->
<!-- <Row>-->
<!-- <i-col span="18">-->
<!-- <i-button v-on:click="setValue">setValue</i-button>-->
<!-- </i-col>-->
<!-- <i-col span="4">-->
<!-- <Cascader :data="data" v-model="value1" transfer></Cascader>-->
<!-- </i-col>-->
<!-- </Row>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data () {-->
<!-- return {-->
<!-- value1: [],-->
<!-- data: [{-->
<!-- value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',-->
<!-- label: '北京',-->
<!-- children: [{-->
<!-- value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',-->
<!-- label: '故宫'-->
<!-- }, {-->
<!-- value: 'tiantan',-->
<!-- label: '天坛'-->
<!-- }, {-->
<!-- value: 'wangfujing',-->
<!-- label: '王府井'-->
<!-- }]-->
<!-- }, {-->
<!-- value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',-->
<!-- label: '江苏',-->
<!-- children: [{-->
<!-- value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',-->
<!-- label: '南京',-->
<!-- children: [{-->
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851a',-->
<!-- label: '夫子庙中国第一庙来自南京',-->
<!-- children:[{-->
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851c',-->
<!-- label:'自定义产品系统来自黑龙江地区'-->
<!-- }]-->
<!-- }]-->
<!-- }, {-->
<!-- value: 'suzhou',-->
<!-- label: '苏州',-->
<!-- children: [{-->
<!-- value: 'zhuozhengyuan',-->
<!-- label: '拙政园',-->
<!-- }, {-->
<!-- value: 'shizilin',-->
<!-- label: '狮子林',-->
<!-- }]-->
<!-- }],-->
<!-- }]-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- setValue() {-->
<!-- var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";-->
<!-- var x = v.split(',')-->
<!-- var x1 = x[0].toString();-->
<!-- var x2 = x[1].toString();-->
<!-- var x3 = x[2].toString();-->
</style>
<!-- this.value1 = x;-->
<!-- }-->
<!-- },-->
<!-- mounted () {-->
<!-- }-->
<!-- }-->
<!--</script>-->
<!--<style>-->
<!--</style>-->