这个代码能单选联动、但是多选的话、二级选项框就会没数据、求大神搭救!!!
html代码:
<el-form :inline="true">
<el-form-item label="选择地区:">
<el-select size="small" style="width: 100px"
multiple
v-model="selectProv"
placeholder="请选择省份"
@change="getProv($event)">
<el-option
v-for="item in provs"
:key="item.id"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select size="small" style="width: 100px"
v-if="selectProv!=''"
multiple
v-model="selectCity"
placeholder="请选择城市">
<el-option
v-for="item in citys"
:key="item.id"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
js:这里只放广东省的二级联动城市(自己的代码有全城市的、因为太长了就不全放出来了)
export default {
data () {
return {
provs:[{label:"北京市",value:"北京市"},
{label:"天津市",value:"天津市"},
{label:"河北省",value:"河北省"},
{label:"山西省",value:"山西省"},
{label:"内蒙古自治区",value:"内蒙古自治区"},
{label:"辽宁省",value:"辽宁省"},
{label:"吉林省",value:"吉林省"},
{label:"黑龙江省",value:"黑龙江省"},
{label:"上海市",value:"上海市"},
{label:"江苏省",value:"江苏省"},
{label:"浙江省",value:"浙江省"},
{label:"安徽省",value:"安徽省"},
{label:"福建省",value:"福建省"},
{label:"江西省",value:"江西省"},
{label:"山东省",value:"山东省"},
{label:"河南省",value:"河南省"},
{label:"湖北省",value:"湖北省"},
{label:"湖南省",value:"湖南省"},
{label:"广东省",value:"广东省"},
{label:"广西壮族自治区",value:"广西壮族自治区"},
{label:"海南省",value:"海南省"},
{label:"重庆市",value:"重庆市"},
{label:"四川省",value:"四川省"},
{label:"贵州省",value:"贵州省"},
{label:"云南省",value:"云南省"},
{label:"西藏自治区",value:"西藏自治区"},
{label:"陕西省",value:"陕西省"},
{label:"甘肃省",value:"甘肃省"},
{label:"青海省",value:"青海省"},
{label:"宁夏回族自治区",value:"宁夏回族自治区"},
{label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"},
{label:"台湾省",value:"台湾省"},
{label:"香港特别行政区",value:"香港特别行政区"},
{label:"澳门特别行政区",value:"澳门特别行政区"}] ,
citys: [],
selectProv: [],//省份最终勾选数据
selectCity: [],//城市最终勾选数据
// selectArea: [],//区/县最终勾选数据
}
},
methods: {
getProv: function (provs) {
let tempCity=[];
this.citys=[];
this.selectCity=[];
let allCity=[
{
prov: "广东省",
label: "广州市"
}, {
prov: "广东省",
label: "韶关市"
}, {
prov: "广东省",
label: "深圳市"
}, {
prov: "广东省",
label: "珠海市"
}, {
prov: "广东省",
label: "汕头市"
}, {
prov: "广东省",
label: "佛山市"
}, {
prov: "广东省",
label: "江门市"
}, {
prov: "广东省",
label: "湛江市"
}, {
prov: "广东省",
label: "茂名市"
}, {
prov: "广东省",
label: "肇庆市"
}, {
prov: "广东省",
label: "惠州市"
}, {
prov: "广东省",
label: "梅州市"
}, {
prov: "广东省",
label: "汕尾市"
}, {
prov: "广东省",
label: "河源市"
}, {
prov: "广东省",
label: "阳江市"
}, {
prov: "广东省",
label: "清远市"
}, {
prov: "广东省",
label: "东莞市"
}, {
prov: "广东省",
label: "中山市"
}, {
prov: "广东省",
label: "潮州市"
}, {
prov: "广东省",
label: "揭阳市"
}, {
prov: "广东省",
label: "云浮市"
},
];
for (var val of allCity){
if (provs == val.prov){
console.log(val);
tempCity.push({label: val.label, value: val.label})
}
}
this.citys = tempCity;
},
}
}
怎么才能做到多选的二级联动呢、求大神搭救吖!!!