Element ui下拉列表显示后台数据

Element ui下拉列表显示后台数据

在写vue时，由于在很短时间内迅速要写出一个项目，所以基础知识掌握不是很牢固就开始上手，在下拉列表回显数据时就一直在搜索资料，以此写一篇文章记录。

el-select下拉框

<el-form-item label="技能分类" prop="skilltype_id">
          <el-select v-model="addForm.skilltype_id" placeholder="请选择技能英文名称" @change="getitem1" >
            <el-option v-for="item in chioce" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
          </el-select>
      </el-form-item>

在Element ui的官方文档已经很详细得讲述了从前端的调用，所以在这里我就再写了。我想记录的是从后调调数据显示。

• prop：用来表单的校验所绑定的数据
• el-select/v-mode：需要传到后台所绑定的数据
• el-option：（:label ：下拉框显示的数据、:value绑定的数据）

data数据

chioce:[],//后端传来的数据全部放在这个数组中，在前端调用数据中的数据即可回显数据

methods方法

getchioce(){
        this.$http.post('url').then(res =>{
          this.chioce=res.data.data
        })
      },
      mounted(){
      this.getchioce()
    }

一定要在mounted中调用这个函数

获取value与lable值

今早把这一块弄明白之后，验证发现添加不进数据库，和后端交流发现，他要的是int类型，也就是id值，但是我传的是字符串，所以晚上又在研究如何传value和label值，我的解决办法也是在看了很多篇博客才得出来的。

id传给后台,typeName显示

@change="getitem1"
//在el-select中加入此方法，一定不能加括号

getitem1(val){
//val即是传进来的id值，也即value值
        var obj = {};
        obj = this.chioce.find((item) =>{
          return item.id ===val;
        });
        console.log(obj.typeName)
        console.log("id的值为："+val)
      }

这样就可以得到lable和value值了