80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<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>
|
|
</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: '狮子林'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
add () {
|
|
this.list.push({
|
|
a: 2
|
|
})
|
|
},
|
|
remove () {
|
|
this.list.splice(0, 1);
|
|
},
|
|
format (labels) {
|
|
return labels.join(' - ');
|
|
}
|
|
}
|
|
}
|
|
</script>
|