65 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
			
		
		
	
	
			65 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
<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>
 |