66 lines
2.1 KiB
Vue
66 lines
2.1 KiB
Vue
<template>
|
|
<div style="margin: 100px;width: 300px;">
|
|
<Cascader v-model="value" :data="data" change-on-select></Cascader>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
value: ['beijing', 'gugong'],
|
|
data: []
|
|
}
|
|
},
|
|
mounted () {
|
|
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: '狮子林',
|
|
}
|
|
]
|
|
}
|
|
],
|
|
}];
|
|
}, 100)
|
|
}
|
|
}
|
|
</script>
|