html如何实现地区选择,实现省市区三级联动选择

如何实现三级联动选择，且如何没有三级时，只显示两个选择框

三级联动.png

1.html部分，带表单验证

v-if="!visible"

label="请选择要添加的常用登录地"

style="margin-bottom: 0;"

required

>

style="width: 120px"

:value="form.selectResult[0]"

@change="handleChinaChange"

placeholder="请选择"

>

v-for="region in regionChina"

:value="region.dis_code"

:key="region.dis_code"

>{{ region.district_name }}

>

style="width: 120px"

placeholder="请选择"

:value="form.selectResult[1]"

@change="handleProvinceChange"

>

v-for="province in provinceData"

:value="province.dis_code"

:key="province.dis_code"

>{{ province.district_name }}

>

style="width: 120px"

placeholder="请选择"

:value="form.selectResult[2]"

@change="handleCityChange"

>

v-for="city in cityData"

:value="city.dis_code"

:key="city.dis_code"

>

{{ city.district_name }}

关于表单验证的部分，可以在表单验证的地方进行详细书名，此处就不做赘述，这个地方主要就是使用了三个下拉选择框；

在三级选择框的后面可以看到使用了 v-if="cityData.length" 这个地方使用这个的原因就是因为后端给的数据像一些特殊地区，比如台湾、香港等地是没有三级选择的，没有三级选择，那么就需要将这个框隐藏，同时验证也要通过。

我在做的时候，由于当时看到了后端的数据格式，所以这个地方判断的时候使用的是v-if = "form.selectResult[0]!='1'"，因为当时给的数据是这样的

一级选择数据.png

我知道，只有一级选择中国大陆的时候才会有三级选择，这样做固然可以实现，但是不利于后期的维护；另外这个地方为什么不适用v-show？

v-if是通过控制DOM节点的存在来控制元素是现实还是隐藏的；v-show是通过设置DOM元素的display样式来进行视觉上的隐藏；

所以这个地方如果使用v-show的话表单验证就不会通过。

表单验证.png

2.js部分

export default {

data() {

return {

type: "manage",

editObj: {},

title: "管理常用登录地",

visible: false,

modalVisible: false,

confirmLoading: false,

treeData: [],

form: {

selectResult: []

},

//验证规则

rules: {

selectResult: {

"0": [{ required: true, message: "请选择区域", trigger: "change" }],

"1": [{ required: true, message: "请选择省", trigger: "change" }],

"2": [{ required: true, message: "请选择市", trigger: "change" }]

},

log_server: [

{ required: true, message: "请添加服务器", trigger: "change" }

]

},

regionChina: [],

provinceData: [],

cityData: []

};

},

created() {

this.getFirstData();

},

methods: {

/*===== 获得大地区数据 =====*/

getFirstData() {

this.regionChina = result.list || [];

},

/*===== 获得省级城市数据 =====*/

getSecondData() {

this.provinceData = result.list || []；

},

/*===== 获得市级城市数据 =====*/

getThirdData() {

this.cityData = result.list || [];//请求接口得到，此处未展示请求接口部分的代码；

},

/*===== 省市区三级联动 =====*/

handleChinaChange(value) {

this.provinceData = [];

this.cityData = [];

this.form.selectResult.length = 0;

this.form.selectResult.push(value);

this.getSecondData();

},

handleProvinceChange(value) {

this.cityData = [];

this.form.selectResult.length = 1;

this.form.selectResult.push(value);

this.getThirdData();

},

handleCityChange(value) {

this.form.selectResult.length = 2;

this.form.selectResult.push(value);

},

/*=====取消操作=====*/

handleCancel() {

this.$refs.ruleForm.clearValidate();

this.provinceData = [];

this.cityData = [];

let { modalVisible, form } = this.$options.data();

Object.assign(this.$data, { modalVisible, form });

}

}

};

这里值得注意的是在取消的时候要将provinceData和cityData的内容清空哟(互联网是有记忆的，有的时候清空也是不行的哟所以，网络事实切勿轻易站队)