vue + element + select 获取下拉框的 label 和 value 值( 例如 绑定的是 id , 但后台要求即传 id ,又要传 id 对应的 name )
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
vue + element + select 获取下拉框的 label 和 value 值( 例如 绑定的是 id , 但后台要求即传 id ,又要传 id 对应的 name )
<template>
<div>
<el-form :inline="true" :model="form" ref="form" :rules="formRule">
<el-form-item label="标题" prop="titleId">
<el-select v-model="form.titleId" filterable placeholder="请选择标题" @change="changeTitle">
<el-option v-for="item in titleList" :key="item.id" :label="item.titleName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { formRule} from "@/utils/valid";
export default {
data() {
return {
form: {},
formRule, // 表单校验
titleList: [], // 标题列表
title: {}, // 选中的标题
}
},
methods: {
// 调接口获取标题列表
getTitle() {
titleList().then(res => {
if (res.code == 0) {
this.titleList= res.data;
} else {
this.$message.error(res.message)
}
})
},
changeTitle(id) {
this.title= this.titleList.find(item => item.id == id) // this.title 是通过选中的id去从标题列表里面查找得到的是选中的那一条数据的一个对象,包含选中的数据的 name、id 等 , 后面可以通过 this.title.name 来获取标题名称
},
element select 根据id 获取name
1、为什么要获取 Select(选择器)
选中的 label
的 id
和 name
等属性:
从后台传过来的数据,想让它显示在 Select 选择器
的栏中,并想动态获取所选中的 label
值的 id
与 name
等属性值,以备后用;
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)