parent
c211f71778
commit
2810d8c78d
3 changed files with 137 additions and 111 deletions
|
@ -1,80 +1,72 @@
|
|||
<template>
|
||||
<div v-for="item in list">
|
||||
<Cascader :data="data" change-on-select :render-format="format"></Cascader>
|
||||
</div>
|
||||
<i-button @click="add">add</i-button>
|
||||
<i-button @click="remove">remove</i-button>
|
||||
<Cascader :data="data" :value.sync="value" change-on-select></Cascader>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
a: 1
|
||||
}
|
||||
],
|
||||
data: [{
|
||||
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: [
|
||||
{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园'
|
||||
},
|
||||
{
|
||||
value: 'shizilin',
|
||||
label: '狮子林'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}]
|
||||
value: [],
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.list.push({
|
||||
a: 2
|
||||
})
|
||||
},
|
||||
remove () {
|
||||
this.list.splice(0, 1);
|
||||
},
|
||||
format (labels) {
|
||||
return labels.join(' - ');
|
||||
updateData () {
|
||||
setTimeout(() => {
|
||||
this.data = [{
|
||||
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: [
|
||||
{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园'
|
||||
},
|
||||
{
|
||||
value: 'shizilin',
|
||||
label: '狮子林'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}];
|
||||
setTimeout(() => {
|
||||
this.value = ['beijing', 'tiantan'];
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue