账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    ElementUI select 下拉框后台传值回显值问题
    27
    0
    <el-select size="small"  placeholder="请选择危险源性质"
        @change="handDangerousNatureSelect"
         v-model="form.dicDangertype">
        <el-option :label="item.codename"
                   :value="item.pkCodenum"
                   :key="index"
                   style="padding: 0 15px;"
                   v-for="(item,index) in localWord.dangerousNature">
        </el-option>
    </el-select>
    

    编辑和查看用的同一个页面,编辑下拉框的时候value绑定的是code码,后台需要传code码,但是编辑回显得时候,后台返回的也是code码,从而v-model也就成了code码 回显就成了数字了 不知道各位大侠 select 这个组件 是咋用的,请给出答案,谢谢~

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 在ElementUI中,Select下拉框的回显值问题通常涉及到数据绑定和选项匹配。假设你从后台获取的数据结构是这样的:

      javascript // 后台返回的数据 dataFromBackend = [ {id: 1, name: 'Option A'}, {id: 2, name: 'Option B'}, // ... ]

      然后你已经选择了某个选项,比如id为2的选项。

      你需要在Vue实例的数据对象(data)中定义一个变量来保存选中的值,例如:

      javascript // 在你的Vue组件中 data() { return { selectedValue: '', // 或者初始化为已知的后台返回的某个id值,如 selectedValue: 2, options: [] } }, created() { // 获取后台数据并赋值给options this.options = this.dataFromBackend; }

      然后在ElementUI的Select组件中这样使用:

      html <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select>

      这样,v-model="selectedValue"会根据你设置的值自动回显对应的选项。如果你的selectedValue与后台某项数据的id相匹配,那么这个id对应的option就会被选中显示出来。

    更多回答
    扫一扫访问手机版