Vue+elementUi给select选项值动态从后台获取,同时将选中值的id传给后台
转载自:https://blog.csdn.net/adminguan/article/details/103592109给出的问题:选项动态从后台获取,同时要实时获取到用户选中值的idselect框有红,黄,蓝三个值,id分别为1,2,3用户点击红,获取到红的id为1用户点击黄,获取到黄的id为2用户点击蓝,获取到蓝的id为3问题步骤分为三步:1、点击select框,发送请求到后台取到data值
转载自:https://blog.csdn.net/adminguan/article/details/103592109
给出的问题:
-
选项动态从后台获取,同时要实时获取到用户选中值的id
-
select框有红,黄,蓝三个值,id分别为1,2,3
-
用户点击红,获取到红的id为1
-
用户点击黄,获取到黄的id为2
-
用户点击蓝,获取到蓝的id为3
问题步骤分为三步:
-
1、点击select框,发送请求到后台取到data值,动态渲染到页面上
-
2、点击要选中的值,拿到选中值的id
-
3、获取选中值的id,赋值给定义好的某个变量
准备工作:
-
创建全局变量data,用于存放后台返回数据
-
data() {
-
return {
-
dataList: {}
-
}
-
},
-
给el-select设置如下属性:
-
v-model="dataList.name" // 用于双向绑定
-
@focus="function1" // 点击select框时被触发的方法
-
@change="function2(dataList.name)" // 点击要选中的值时被触发的方法
-
给el-option设置以下属性:
-
v-for="item in dataList" // 遍历获取到的select列表data
-
:key="item.id" // 使用v-for要加key,避免遍历出错
-
:value="item.id" // option实际值,发送到后台的值
-
:label="item.name" // option的显示值,用户看到的值
-
<el-select
-
v-model="dataList.name"
-
clearable
-
placeholder="物品类别"
-
class="filter-item"
-
style="width: 140px"
-
@focus="function1"
-
@change="function2(dataList.name)">
-
<el-option
-
v-for="item in dataList"
-
:key="item.id"
-
:value="item.id"
-
:label="item.name"/>
-
</el-select>
添加方法:
方法一:没有token验证是可以直接使用axios方法
-
import axios from 'axios' // 在显示页面导入axios
-
// 点击了select框
-
function1() {
-
// 发请求获取渠道下拉框的值【没有token验证是可以直接使用axios方法】
-
const res = axios.get('url地址');
-
if (res.code === 200) {
-
this.data = res.data; // 把获取到的数据赋给this.data
-
}
-
}
方法二:有token验证要调用方法
-
// 在xxx.js文件里面写的查询方法
-
export function query() {
-
return request({
-
url: 'url地址',
-
method: 'GET'
-
})
-
}
-
import { query } from '@/api/xxx' // 在显示页面导入在xxx.js文件里面写query方法
-
// 点击了select框
-
function1() {
-
// 发请求获取渠道下拉框的值
-
query().then(res => { // 调用导入的query方法进行查询
-
if (res.code === 200) {
-
this.data = res.data // 把获取到的数据赋给this.data
-
}
-
}).catch(err => {
-
console.log(err)
-
})
-
}
value绑定值是 item.id,select选框选中的直接就是需要的id了
-
function2(val) {
-
alert(val) // 此时打印的直接就是id
-
}
完整的代码:
index.vue
-
<template>
-
<div class="app-container">
-
<!--工具栏-->
-
<div class="head-container">
-
<!--select下拉框动态显示数据-->
-
<el-select
-
v-model="dataList.name"
-
clearable
-
placeholder="物品类别"
-
class="filter-item"
-
style="width: 140px"
-
@focus="function1"
-
@change="function2(dataList.name)">
-
<el-option
-
v-for="item in dataList"
-
:key="item.id"
-
:value="item.id"
-
:label="item.name"/>
-
</el-select>
-
</div>
-
</div>
-
</template>
-
<script>
-
import { query } from '@/api/article'
-
export default {
-
data() {
-
return {
-
dataList: {}
-
}
-
},
-
methods: {
-
// 点击了select框
-
function1() {
-
// 发请求获取渠道下拉框的值
-
query().then(res => {
-
if (res.code === 200) {
-
this.dataList = res.data // 把获取到的数据赋给this.dataList
-
}
-
}).catch(err => {
-
console.log(err)
-
})
-
},
-
function2(val) {
-
alert(val) // 此时打印的直接就是id
-
}
-
}
-
}
-
</script>
-
<style scoped>
-
</style>
index.js
-
import request from '@/utils/request'
-
export function query() {
-
return request({
-
url: 'url地址',
-
method: 'GET'
-
})
-
}
更多推荐
所有评论(0)