element select选择器的小东西

需要实现一个点击选择编辑的效果，如图所示


点击修改的时候，显示一个下拉框，可以进行修改，修改完成以后点击保存

// html
<div class="six" >性别：
	<span v-if="isChangeSex == false">{{this.userSix ? this.userSix : '暂无数据'}}</span>
    	<el-select v-model="sex" @change="chooseSex" v-else>
          <el-option
              v-for="item in handleSex"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
      </el-select>
      <el-button type="text" @click="changeSex">{{this.isChangeSex ? '保存': '修改'}}</el-button>
</div>

// data
handleSex: [{label: '未知',value:0},{label: '男', value:1},{label: '女', value:2}]
isChangeSex: false, // 显示性别下拉框
sex: [],

// js
changeSex (e) {
   this.isChangeSex = true
   if(e.toElement.innerText == '保存') {
       updateUserInfoGender(this.userUin , this.gender).then(resp=>{
           if(resp.errCode == 0){
               this.isChangeSex = false
               // this.handleSex.label = this.userSix
               this.$message.success('修改性别成功')
               this.getOnlineMessage()
           }else {
               this.$message.error(resp.msg);
           }
       })
   } 
},

但是这里会遇到一个小问题，就是首次进入页面的时候，拿到了数据渲染到了页面上，假如当前页面显示性别是男，那么点击修改的时候，下拉框应该要显示男才对，但是

首次修改并没有成功进行赋值，需要点击以后才能赋值，怎么修改呢，你只需要在拿到数据进行页面赋值的时候，手动把下拉框的v-model的sex赋值一次就是了（看data，0代表位置，1是男，2是女）

if(resp.data.userInfo.gender == 1){
      this.userSix = '男'
      this.sex = 1 // 给v-model赋值
  }else if (resp.data.userInfo.gender == 2) {
      this.userSix = '女'
      this.sex = 2 // 给v-model赋值
  }else {
      this.userSix = '未知'
      this.sex = 0 // 给v-model赋值
  }

这样子就可以了，也算是自己遇到的一个问题，记录一下