下拉框展示-选择-联动

效果展示：

描述：点击-下拉框展示已有航路点-选择-右边坐标联动

---

html代码

<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
              ...
            ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度" label-width="45px">
              <el-input
             ...
            ></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>

触发change后JS部分代码

changePoint(e,v){
      var d=1;
      //按照input的名字，对存储的航路点信息过滤
       let target=this.pointsData2.filter((point)=>{
               return point.name==e
       })
       //默认初始为请选择，经纬度都为0
       if(target[0].name=="请选择"){
         this.airwaylist.pointList[v].latlon=[0,0]
       }
       //选择了航路点，将新信息存储到this.airwaylist.pointList中
       if(target.length>0&&target[0].name!="请选择"){
         let newlatlon=this.ne2num(target[0].latlon).split(",")
         let newlatlon2=[]
         newlatlon2[0]=eval(newlatlon[0])
         newlatlon2[1]=eval(newlatlon[1])
         this.airwaylist.pointList[v].latlon=newlatlon2
       }
      let list2 =[];
      let n = this.airwaylist.pointList.length
      //判断如果有经纬度为0的点，标志位置0
      for(let i=0;i<n;i++){
        list2[i]=this.airwaylist.pointList[i].latlon
        if(this.airwaylist.pointList[i].latlon[0]==0||this.airwaylist.pointList[i].latlon[1]==0){
        d=0;
       }
      } 
      //如果标志位为1，地图上画点。
      if(d==1){
        this.$parent.drawshow(list2,aid)
        }
     },

知识点：

1、<el-select 选择框嵌套 v-model=“arr[]”绑定最终显示内容
<el-option下拉框内容 v-for=“item in pointsData2”循环数组

select 出现的数据范围大于 option中出现的数据范围
2、@change绑定在select中
3、数组.filter 对数组过滤
4、细节：对未选时push“请选择”，经纬度置0，经纬度0时不画在地图中