JAVA如何封装省市区_基于element ui封装的省市区三级联动

工作中总会遇到些头疼的事，例如想在elememt ui中找个三级联动，结果发现没有，于是自己封装了一个。具体代码如下：

{{item}}

省

{{item}}

市

{{item}}

区

export default{

data(){

return {

sheng : "",

shi : "",

xian : ""

}

},

computed : {

allsheng(){

console.log(this.sheng)

return citydata.map(item=>item.name);

},

allshi(){

console.log(this.shi)

if(this.sheng==''){

this.shi=''

}else{

return citydata.filter(item=>item.name == this.sheng)[0].city.map(item=>item.name);

}

},

allxian(){

console.log(this.xian)

if(this.sheng==''){

this.xian=''

}else{

var thecity = citydata.filter(item=>item.name == this.sheng)[0].city.filter(item=>item.name == this.shi)[0];

if(thecity){

return thecity.area;

}

return [];

}

}

},

watch : {

sheng(){

this.shi = "";

this.xian = "";

},

shi(){

this.xian ="";

}

}

}

city.js是省市区的json(从某网站上拔下来的，具体就不提供了)，我在index.html中引入的

里面是这样子滴：

我这是在vue项目中用的，所有封装成了组件，希望对你有所帮助