3. Vue-----类似于省市级三级联动，可自定义数据
2019-11-26 本文已影响0人
艾特五三
1. 上上图 点击 分别选择 幢 - 单元 -室
1574751300683.gif
2.视图 注意 section ---下的ul列表
<view class="cu-form-group" @click="choseAdd()">
<view class="title">住房信息</view>
<input placeholder="请选住户地址" style="margin-right: 2%; margin-left: 36%; color: #333333;" name="input" disabled
v-model="area">
<view style="width: 11px; height: 11px; background-image:url(/static/img/ic_more.png); background-size: contain; margin-left: -1%;"></view>
</view>
<section class="showChose" v-show="showChose">
<section class="address">
<section class="title" style="display: inline-flex; width: 100%;">
<view>请选择居住地址</view>
<view style=" width: 28px; height: 28px; margin-left: 45%; margin-top: 2%; background-image:url(/static/img/ic_close.png); background-size:contain; "
@click="closeAdd()">
</view>
</section>
<section class="title title2">
<div class="area" @click="provinceSelected()">{{Province?Province:''}}</div>
<div class="area" @click="citySelected()" :class="City?'':'active'">{{City?City:'请选择'}}</div>
<div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City">{{District?District:'请选择'}}</div>
</section>
<ul ref="selectUl">
<li class="addList" v-for="(v,index) in info" :key="index" @click="getProvinceId(v.id, v.name, index)" v-show="showProvince"
:class="v.selected ? 'active' : ''">{{v.name}}</li>
<li class="addList" v-for="(v,index) in showCityList" :key="index" @click="getCityId(v.id, v.name, index)" v-show="showCity"
:class="v.selected ? 'active' : ''">{{v.name}}</li>
<li class="addList" v-for="(v,index) in showDistrictList" :key="index" @click="getDistrictId(v.id, v.name, index)"
v-show="showDistrict" :class="v.selected ? 'active' : ''">{{v.name}}</li>
</ul>
</section>
</section>
3. 上方法，
/***首先定义：一些变量***/
<script>
export default {
data() {
return {
showChose: false，
showCity: false,//是否显示ul下li标签 城市 即：单元
showDistrict: false,//区集合：即 室集合
showCityList: false,//市集合：即 单元集合
selected: false, // v-for循环判断是否为当前
province: 1,//选中的省得id，即幢的id
city: 3,//选中的市的id,即 单元的id
district: 57,//选中的区的id，即 室的id
GetProvinceId: 2,
District: false,//选中的区的值：即选中的室
Province: false,//选中的省得值：即 幢的值
City: false,//选中的市的值：即 单元的值
info:[ //所有的省集合： 即所有的 幢集合
{
id: 1,
name: '1幢',
city: [{
id: 1,
name: '1单元',
district: [{
id: 1,
name: '101室'
},
{
id: 2,
name: '102室'
},
{
id: 3,
name: '103室'
},
{
id: 4,
name: '104室'
}
]
}]
}
]
}
}
}
</script>
重要的方法来喽，睁大眼睛哦
//关闭打开 section的方法
choseAdd: function() {
this.showChose = true;
},
closeAdd: function() {
this.showChose = false;
}
//过滤器：add 集合， name 集合中的字段名，code 上一级集合的如：省得id
_filter(add, name, code) {
let result = [];
for (let i = 0; i < add.length; i++) {
if (code == add[i].id) {
result = add[i][name];
}
}
return result;
}
/*******以下分别是省市区选中获取id，name的方法*********/
getProvinceId: function(code, input, index) {
this.province = code;
this.Province = input;
this.showProvince = false;
this.showCity = true;
this.showDistrict = false;
this.showCityList = this._filter(this.info, 'city', this.province);
// 点击选择当前
this.info.map(a => a.selected = false);
this.info[index].selected = true;
// this.$refs.selectUl.scrollTop = 0;
},
provinceSelected: function() {
// 清除市级和区级列表
this.showCityList = false;
this.showDistrictList = false;
// 清除市级和区级选项
this.City = false;
this.District = false;
// 选项页面的切换
this.showProvince = true;
this.showCity = false;
this.showDistrict = false;
}
getCityId: function(code, input, index) {
this.city = code;
this.City = input;
this.showProvince = false;
this.showCity = false;
this.showDistrict = true;
this.showDistrictList = this._filter(this.showCityList, 'district', this.city);
// 选择当前添加active
this.showCityList.map(a => a.selected = false);
this.showCityList[index].selected = true;
// this.$refs.selectUl.scrollTop = 0;
},
citySelected: function() {
this.showProvince = false;
this.showCity = true;
this.showDistrict = false;
},
getDistrictId: function(code, input, index) {
this.district = code;
this.District = input;
// 选择当前添加active
this.showDistrictList.map(a => a.selected = false);
this.showDistrictList[index].selected = true;
this.area = this.Province + this.City + this.District /* + " : " + this.province + " : " + this.city + " : " + this.district */ ;
// 选取市区选项之后关闭弹层
this.showChose = false;
this.sendValue(this.area);
// this.$refs.selectUl.scrollTop = 0;
},
districtSelected: function() {
this.showProvince = false;
this.showCity = false;
this.showDistrict = true;
},
//给父组件传值
sendValue(val) {
this.$emit('getValue', val);
}
