vue框架中select默认显示

这是一个三级联动,写修改页面时,需要展现该条记录所在的“省”,“市”,“县”并默认选中,还要显示其他的“省”,“市”,“县”。最大误区:select的默认显示是:value而不是text。
1、在组件中的写法

      <select name="province" id="province" @change="getCity()" ref="ref_province" v-model="selected.province">
        <option value="0" selected>请选择省</option>
        <option v-for="(v,i) in this.allProvince" :id="v.id" :value="v.name"  :label="v.name" :key="v.id"></option>
      </select>
      <select name="city" id="city" @change="getDistrict()" ref="ref_city" v-model="selected.city">
        <option value="0" selected>请选择市</option>
        <option v-for="(v,i) in this.allCity" :id="v.id" :value="v.name" >{{v.name}}</option>
      </select>
      <select name="county" id="district" ref="ref_district" v-model="selected.district">
        <option value="0" selected>请选择县</option>
        <option v-for="(v,i) in this.allDistrict" :id="v.id" :value="v.name" >{{v.name}}</option>
      </select>

2、在js中定义,变量。

data () {
      return {
      selected:{province:'0',city:'0',district:'0'},//默认省市县
      allProvince: '',//所有省
      allCity:'',
      allDistrict:''
      };
  },
created(){
      this.workDelId = this.upId;
      this.isUpdate()//页面加载完就调用
  },
  methods:{
    isUpdate(){//根据id的值判断,是修改页面还是添加页面
      if(this.workDelId != ""){//id不为空表示修改页面,根据id值获取信息
        this.workDetail()
      }else {
        this.getProvince()//id值为空表示添加页面,直接获取省接口
      }
    },

3、获取到当前信息的“省”,“市”,“县”

 workDetail(){
        var that = this;
        this.apiPost(url+'project/inProjectinformation/detail',{'id':this.workDelId }).then(function (data) {
          console.log(data)
            that.selected.province = data.Return.province;
            that.selected.city = data.Return.city;
            that.selected.district = data.Return.district;
            that.getProvince()//调用省接口
        })
      },

4、获取"省级"接口

 getProvince(){
      var that = this;
      this.apiPost(url+"area/sysArea/province",{}).then(function (data) {
          if(data.Status == '0'){
            that.allProvince = data.Return;
            for(let i=0;i<data.Return.length;i++){//获取默认选中省的id,查找该省份下的市
                if(that.selected.province == data.Return[i].name){
                  that.selected.province = data.Return[i].name
                  that.getCity(data.Return[i].id)//调用 “市“ 接口
                }
            }
          }
      })
    }

5、获取"市级"接口

getCity(proId){
      if(proId == undefined){//如果省id不存在,表示不是从getProvince()方法里调用的,而是调用@change=“getCity()”
        const all_pro=this.$refs.ref_province;
        const index=all_pro.selectedIndex;
        proId = all_pro.options[index].id  //则获取当前选择省的id,
        this.selected.city='0'  //并让市显示为“请选择”
      }
      var that = this;
      this.apiPost(url+"area/sysArea/city",{'parent':{'id':proId}}).then(function (data) {
        if(data.Status == '0'){
          that.allCity = data.Return;
          for(let i=0;i<data.Return.length;i++){
            if(that.selected.city == data.Return[i].name){
              that.getDistrict(data.Return[i].id)
            }
          }
        }
      })
    }

6、获取“县级”接口同上,依此类推。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文在Windows系统环境下使用USB(8GB)制作Kali 2016 2的系统启动盘 首先需要下载Kali 2...
    wudics阅读 7,098评论 0 3
  • 面试官:“熟悉哪种语言”。应聘者:“JAVA”。面试官:“知道什么叫类么”。应聘者:“我这人实在,工作努力,不知道...
    楚君竹阅读 143评论 0 0
  • 最近,有个坊间流传的国际孤独等级表: 孤独真的可怕吗?真的让人避之不及吗? 有一位作家说:“哪里有人会喜欢孤独,不...
    山月华阅读 819评论 3 9
  • 古道边,一匹瘦马,两位镖师,行色匆草,好似没命的往前赶,恨不得多生了两条腿,剑阁峥嵘而崔嵬,大有一夫当关万夫莫开之...
    一孤勇阅读 652评论 0 4
  • 引入 eventbus 1、在数据接收页面—订阅,取消订阅,接收数据 2、在数据传送的地方—发送数据 注意 Eve...
    黄晓果阅读 464评论 0 1