Cascader support slot
Cascader support slot
This commit is contained in:
parent
54a83aa565
commit
75e5c6a51e
3 changed files with 78 additions and 69 deletions
|
@ -1,72 +1,67 @@
|
|||
<template>
|
||||
<Cascader :data="data" :value.sync="value" change-on-select></Cascader>
|
||||
{{ text }}
|
||||
<Cascader :data="data" @on-change="handleChange">
|
||||
<a href="javascript:void(0)">选择</a>
|
||||
</Cascader>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: [],
|
||||
data: []
|
||||
text: '未选择',
|
||||
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: {
|
||||
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);
|
||||
handleChange (value, selectedData) {
|
||||
this.text = selectedData.map(o => o.label).join(', ');
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue