学无先后,达者为师

网站首页 编程语言 正文

动态获取从 [Element-ui] 的 Select (选择器)选中的 label 值得 id 与 name 等所有属性值

作者:狮子座的男孩 更新时间: 2022-05-10 编程语言

1、为什么要获取 Select(选择器) 选中的 labelidname 等属性:

从后台传过来的数据,想让它显示在 Select 选择器的栏中,并想动态获取所选中的 label 值的 idname 等属性值,以备后用;

2、通过循环将数据显示出来:

// 此时的显示效果为:将 List 中的数据都展示在 Select(选择器) 的下拉框中;

<template>
	// 此时的 v-model 的含义:绑定后台获取数据的第一个 id 值;
	// 目的:使得选择器中填入的是从接口处获得的第一条数据;
    <el-select class="top-select" v-model="formData.operator_id" size="mini" >
          <el-option
            v-for="(item,id) in List" :key="id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
</template>
<script>
// 导入数据接口;
import {List} from "@/api/list";
export default {
	data() {
	  return {
	    formData:{
        operator_id: 126;
        // 此时默认设置的是:List 中获去取的第一个数据的 id 值;
     	},
     	// 此时的 List 是指:从后台获得的数据数组;
	    List: [],
	  }
	 },
	 created(){
	 	//获得数据接口的数据,并用 List 数组来保存该数据;
	    List().then(res => {
	    this.List = res.data;
	    });
	 },
	 methods: {
	 },
}
</script>
<style lang="scss" scoped>
</style>


3、添加单击 lable 触发事件,动态获取 idname 等属性值:

// 此时就能在后台获得单击下拉框选项的 idname 等属性值;

<template>
    <el-select class="top-select" v-model="formData.operator_id" size="mini" >
          <el-option
            v-for="(item,id) in List" :key="id"
            :label="item.name"
            :value="item.id"
            @click.native="handleChange(item)"
            // 此时表示单击下拉框中数据,就能将单击数据的相关的 id name 等值获得;
          >
          </el-option>
        </el-select>
</template>
<script>
import {List} from "@/api/list";
export default {
	data() {
	  return {
	    formData:{
        operator_id: 126
     	},
	    List: [],
	  }
	 },
	 created(){
	    List().then(res => {
	    this.List = res.data;
	    });
	 },
	 methods: {
		 handleChange(val){
		 // 此时用 val 来作为形参来接受 handleChange(item) 方法传来的 item 值;
		 // 然后在后台就可以拿到点击下拉框中数据的 id 与 name 等属性值;
	      console.log(val.id);
	      console.log(val.name);
	    }
	 },
}
</script>
<style lang="scss" scoped>
</style>

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

原文链接:https://blog.csdn.net/weixin_43405300/article/details/124356838

栏目分类
最近更新