看到有大佬發jq版本的 

我想發一個vue版本的 

有這方面的愛好者 可以使用起來

引入組件js 上傳 json格式文件

演示圖

數據提交

實例

父級組件

<script >
 const app = Vue.createApp({
        data(){
         return {
             data:{
              
            }
        },
        mounted(){
        },
        
        methods:{
            citys(value){
                this.data.city = value
            },
           
          },
     }).use(ElementPlus)
    app.component('shengshiqu',shengshiqu)
    app.mount('#add-app');
 </script>

安裝組件

use(ElementPlus)

安裝聯動組件

app.component('shengshiqu',shengshiqu)

掛載實例

app.mount('#app');

子組件

const shengshiqu = ('shengshiqu', {
	template: `
	<el-cascader :props="checkstrictly" @change="change" filterable style="width:100%" v-model="optiondata" clearable :options="addressOptions" cle></el-cascader>
	`
	,
	props: {
        type:{
            type:Number,
        },
		treeoption:{
			type:Array,
		},
		checkstrictly:{
			type:Object,
		},
		is_clear:{
            type:Boolean,
            default:false
        },
    },
	watch:{
		is_clear(val){
			if(val){
				this.addressOptions = []
			}
		}
	},
	data(){
		return{
			optiondata:this.treeoption,
			addressOptions:[],
		}
	},
	mounted(){
		this.init()
	},
    methods: {
        init(){
			var url
			if(this.type == 1){
				url = '/public/static/js/shengshiqu/city-data-level3.json'
			}else if(this.type == 2){
				url ='/public/static/js/shengshiqu/city-data-level2.json'
			}else if(this.type == 3){
				url = '/public/static/js/shengshiqu/city-data-level1.json'
			}
			axios.get(url).then(response => {
			   this.addressOptions = response.data
			})
		},
		change(val){
			this.$emit('city',val)
		}
    },
});

把值傳回父級組件

this.$emit('city',val)

父級接收值

this.data.city = value

附件下載：

登錄后可免費下載！