86 lines
1.4 KiB
Vue
86 lines
1.4 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>
|