结果展示:
描述:地图信息与子组件dialog信息联动显示
界面部分代码:
<el-row v-for="(item, index) in airwaylist.pointList" :key="index" >
<el-col :span="6" class="posstyle" >
<el-form-item >
<template>
<el-select v-model="selectArr[index]" filterable placeholder="坐标" @change="changePoint($event,index)">
<el-option v-for="item in pointsData2" :key="item.id" :label="item.name" :value="item.name"></el-option>
</el-select></template>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="经度" label-width="45px">
<el-input
v-model="item.latlon[0]"
autocomplete="off"
@change="changePos"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="纬度" label-width="45px">
<el-input
v-model="item.latlon[1]"
autocomplete="off"
@change="changePos"
></el-input>
</el-form-item>
</el-col>
<el-col style="width:10px;margin-top:8px">
<i @click="del(index)" class="el-icon-delete"></i>
</el-col>
</el-row>
分析:
v-for循环航线中航路点 airwaylist.pointList
划分为三列分别为:坐标名称、经度、纬度
v-model绑定,监听用户input事件来更新数据
经纬度改变时触发函数@change=“changePos”
下面是JS部分的函数代码:
changePos(){
//在原来图层上找到原有的点,重新赋值新位置,赋值新标注
let _this=this
let list2 =[];
let n = this.airwaylist.pointList.length
//由于双向绑定,input变化将导致this.airwaylist.pointList中数据变化
for(let i=0;i<n;i++){
let list3=[]
list3.push(+this.airwaylist.pointList[i].latlon[0])
list3.push(+this.airwaylist.pointList[i].latlon[1])
//前面加+为将字符串转化为数字形式
list2.push(list3)
//list2为只存储经纬度的二维数组
this.drawshow(list2)
//写一个drawshow()函数将改变后的画出来
},
学习内容:
提示:这里可以添加要学的内容
1、v-model双向绑定
2、划分页面显示
3、改变后触发@change=“changePos”