74 lines
1.2 KiB
Vue
74 lines
1.2 KiB
Vue
<script>
|
|
/* eslint-disable no-console */
|
|
import '../assets/index.less';
|
|
import Cascader from '../index';
|
|
|
|
const addressOptions = [{
|
|
name: '福建',
|
|
code: 'fj',
|
|
nodes: [{
|
|
name: '福州',
|
|
code: 'fuzhou',
|
|
nodes: [{
|
|
name: '马尾',
|
|
code: 'mawei',
|
|
}],
|
|
}, {
|
|
name: '泉州',
|
|
code: 'quanzhou',
|
|
}],
|
|
}, {
|
|
name: '浙江',
|
|
code: 'zj',
|
|
nodes: [{
|
|
name: '杭州',
|
|
code: 'hangzhou',
|
|
nodes: [{
|
|
name: '余杭',
|
|
code: 'yuhang',
|
|
}],
|
|
}],
|
|
}, {
|
|
name: '北京',
|
|
code: 'bj',
|
|
nodes: [{
|
|
name: '朝阳区',
|
|
code: 'chaoyang',
|
|
}, {
|
|
name: '海淀区',
|
|
code: 'haidian',
|
|
disabled: true,
|
|
}],
|
|
}];
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
inputValue: '',
|
|
};
|
|
},
|
|
methods: {
|
|
onChange (value, selectedOptions) {
|
|
console.log(value, selectedOptions);
|
|
this.inputValue = selectedOptions.map(o => o.name).join(', ');
|
|
},
|
|
},
|
|
|
|
render () {
|
|
return (
|
|
<Cascader
|
|
options={addressOptions}
|
|
onChange={this.onChange}
|
|
fieldNames={{ label: 'name', value: 'code', children: 'nodes' }}
|
|
>
|
|
<input
|
|
placeholder='please select address'
|
|
value={this.inputValue}
|
|
/>
|
|
</Cascader>
|
|
);
|
|
},
|
|
};
|
|
|
|
</script>
|