房屋租赁协议书,花田半亩 博客,黄圣依诞下二胎
首先呈现效果图
1.我的是通过element-ui实现的；可自由选择ui
2.话不多说，直接上代码，结构非常简单
我要评论 1 <el-form ref="form" :model="form" label-width="100px">
2 <el-form-item label="">
3 一:vue实现城市联动选择
4 </el-form-item>
5 <el-form-item label="">
6 一:可清除输入框记录
7 </el-form-item>
8 <el-form-item label="所在地区：" class="selform">
9 <el-cascader
10 :options="cityinfo"
11 v-model="form.selectedoptions"
12 :change-on-select="true"
13 :clearable="true"
14 :filterable="true"
15 @change="handlechange">
16 </el-cascader>
17 <span>所选地区：{{form.city | myaddresscity}}{{form.erae | myaddresserae}}{{form.minerae | myaddressminerae}}</span>
18 </el-form-item>
19 </el-form>
3.js部分（重点部分是实现字段的重重过滤）
1 el: "#app",
2 data: {
3 cityinfo: cityinfo,//地区数据
4 form: {
5 city: '',
6 erae: '',
7 minerae: '',
8 selectedoptions: [],//地区筛选数组
9 },
10 },
11 methods: {
12 handlechange(value) {
13 this.form.city = this.form.selectedoptions[0];
14 this.form.erae = this.form.selectedoptions[1]
15 this.form.minerae = this.form.selectedoptions[2]
16 },
17 },
18 /*字段过滤*/
19 filters: {
20 myaddresscity: function (value) {
21 for (y in this.cityinfo) {
22 if (this.cityinfo[y].value == value) {
23 return value = this.cityinfo[y].label
24 }
25 }
26 },
27 myaddresserae: function (value) {
28 for (y in this.cityinfo) {
29 for (z in this.cityinfo[y].children) {
30 if (this.cityinfo[y].children[z].value == value && value != undefined) {
31 return value = this.cityinfo[y].children[z].label;
32 }
33 }
34 }
35 },
36 myaddressminerae: function (value) {
37 for (y in this.cityinfo) {
38 for (z in this.cityinfo[y].children) {
39 for (i in this.cityinfo[y].children[z].children) {
40 if (this.cityinfo[y].children[z].children[i].value == value && value != undefined) {
41 return value = this.cityinfo[y].children[z].children[i].label
42 }
43 }
44 }
45 }
46 },
47 },
4.城市数据代码格式
{
value: 1, label: '北京', children: [
{
value: 1, label: '北京市', children: [
{ value: 1, label: '东城区' },
{ value: 2, label: '西城区' },
{ value: 3, label: '崇文区' },
{ value: 4, label: '宣武区' },
{ value: 5, label: '朝阳区' },
{ value: 6, label: '丰台区' },
{ value: 7, label: '石景山区' },
{ value: 8, label: '海淀区' },
{ value: 9, label: '门头沟区' },
{ value: 10, label: '房山区' },
{ value: 11, label: '通州区' },
{ value: 12, label: '顺义区' },
{ value: 13, label: '昌平区' },
{ value: 14, label: '大兴区' },
{ value: 15, label: '怀柔区' },
{ value: 16, label: '平谷区' },
{ value: 17, label: '密云县' },
{ value: 18, label: '延庆县' }
]
}
]
},
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论