You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/vc-cascader/demo/animation.vue

65 lines
1.1 KiB

<script>
/* eslint-disable no-console */
import '../assets/index.less'
import Cascader from '../index'
const addressOptions = [{
label: '福建',
value: 'fj',
children: [{
label: '福州',
value: 'fuzhou',
children: [{
label: '马尾',
value: 'mawei',
}],
}, {
label: '泉州',
value: 'quanzhou',
}],
}, {
label: '浙江',
value: 'zj',
children: [{
label: '杭州',
value: 'hangzhou',
children: [{
label: '余杭',
value: 'yuhang',
}],
}],
}, {
label: '北京',
value: 'bj',
children: [{
label: '朝阳区',
value: 'chaoyang',
}, {
label: '海淀区',
value: 'haidian',
}],
}]
export default {
data () {
return {
inputValue: '',
}
},
methods: {
onChange (value, selectedOptions) {
console.log(value, selectedOptions)
this.inputValue = selectedOptions.map(o => o.label).join(', ')
},
},
render () {
return (
<Cascader options={addressOptions} onChange={this.onChange} transitionName='slide-up'>
<input value={this.inputValue}/>
</Cascader>
)
},
}
</script>