Vue+elementUi给select选项值动态从后台获取，同时将选中值的id传给后台

转载自：https://blog.csdn.net/adminguan/article/details/103592109

 

给出的问题：

1. 选项动态从后台获取，同时要实时获取到用户选中值的id

2.  

3. select框有红，黄，蓝三个值，id分别为1，2，3

4. 用户点击红，获取到红的id为1

5. 用户点击黄，获取到黄的id为2

6. 用户点击蓝，获取到蓝的id为3

问题步骤分为三步：

1. 1、点击select框，发送请求到后台取到data值，动态渲染到页面上

2. 2、点击要选中的值，拿到选中值的id

3. 3、获取选中值的id，赋值给定义好的某个变量

准备工作：

1. 创建全局变量data，用于存放后台返回数据

2. data() {

3. return {

4. dataList: {}

5. }

6. },

7.  
8.  

9. 给el-select设置如下属性：

10. v-model="dataList.name" // 用于双向绑定

11. @focus="function1" // 点击select框时被触发的方法

12. @change="function2(dataList.name)" // 点击要选中的值时被触发的方法

13.  
14.  

15. 给el-option设置以下属性：

16. v-for="item in dataList" // 遍历获取到的select列表data

17. :key="item.id" // 使用v-for要加key，避免遍历出错

18. :value="item.id" // option实际值，发送到后台的值

19. :label="item.name" // option的显示值，用户看到的值

1. <el-select

2. v-model="dataList.name"

3. clearable

4. placeholder="物品类别"

5. class="filter-item"

6. style="width: 140px"

7. @focus="function1"

8. @change="function2(dataList.name)">

9. <el-option

10. v-for="item in dataList"

11. :key="item.id"

12. :value="item.id"

13. :label="item.name"/>

14. </el-select>

添加方法：

方法一：没有token验证是可以直接使用axios方法

1. import axios from 'axios' // 在显示页面导入axios

2.  

3. // 点击了select框

4. function1() {

5. // 发请求获取渠道下拉框的值【没有token验证是可以直接使用axios方法】

6. const res = axios.get('url地址');

7. if (res.code === 200) {

8. this.data = res.data; // 把获取到的数据赋给this.data

9. }

10. }

方法二：有token验证要调用方法

1. // 在xxx.js文件里面写的查询方法

2. export function query() {

3. return request({

4. url: 'url地址',

5. method: 'GET'

6. })

7. }

8.  

9. import { query } from '@/api/xxx' // 在显示页面导入在xxx.js文件里面写query方法

10.  

11. // 点击了select框

12. function1() {

13. // 发请求获取渠道下拉框的值

14. query().then(res => { // 调用导入的query方法进行查询

15. if (res.code === 200) {

16. this.data = res.data // 把获取到的数据赋给this.data

17. }

18. }).catch(err => {

19. console.log(err)

20. })

21. }

value绑定值是 item.id，select选框选中的直接就是需要的id了

1. function2(val) {

2. alert(val) // 此时打印的直接就是id

3. }

完整的代码：

index.vue

1. <template>

2. <div class="app-container">

3. <!--工具栏-->

4. <div class="head-container">

5. <!--select下拉框动态显示数据-->

6. <el-select

7. v-model="dataList.name"

8. clearable

9. placeholder="物品类别"

10. class="filter-item"

11. style="width: 140px"

12. @focus="function1"

13. @change="function2(dataList.name)">

14. <el-option

15. v-for="item in dataList"

16. :key="item.id"

17. :value="item.id"

18. :label="item.name"/>

19. </el-select>

20. </div>

21. </div>

22. </template>

23.  

24. <script>

25. import { query } from '@/api/article'

26.  

27. export default {

28. data() {

29. return {

30. dataList: {}

31. }

32. },

33. methods: {

34. // 点击了select框

35. function1() {

36. // 发请求获取渠道下拉框的值

37. query().then(res => {

38. if (res.code === 200) {

39. this.dataList = res.data // 把获取到的数据赋给this.dataList

40. }

41. }).catch(err => {

42. console.log(err)

43. })

44. },

45. function2(val) {

46. alert(val) // 此时打印的直接就是id

47. }

48. }

49. }

50. </script>

51.  

52. <style scoped>

53. </style>

index.js

1. import request from '@/utils/request'

2.  
3.  

4. export function query() {

5. return request({

6. url: 'url地址',

7. method: 'GET'

8. })

9. }