select下拉框调接口获取数据
<el-select v-model="role" value-key="id" @change="getRoleId(role)"> <el-option v-for="item in roleAuthList" :key="item.id" :label="item.role" :value="item">//若写item.id,则只有id传给model </el-option> </el-select>
export default{ data(){ return{ role:'', roleAuthList:'', apoaId:'' } }, created(){ this.getSelect() }, methods:{ getSelect(){ let params = { param:{} } axios.post('/work/queryRoleList',params).then(res=>{ this.roleAuthList=res.data.data }) }, getRoleId(val){//val表示label对应的那一组数据 this.apoaId=val.id; } } }
属性 | 意义 |
---|---|
label | 这是给用户看的,当点击下拉菜单时,会出来选项,用户看到的选项就是这个 |
value | 这是你点击某个label(option)之后,将对应的值给v-model绑定的值model |
key | 这个相当于身份令牌,唯一的,防止出错,虽然没有也行,但是官网推荐还是加上为好。key是为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。 |
这里就是通过value的值,将值给v-model绑定的值,然后将v-model绑定的值通过change方法作为参数,从而获取到该select选项也就是label对应的所有数据。