首页 > 其他分享 >第十八篇 - el-select获取整个对象值

第十八篇 - el-select获取整个对象值

时间:2023-10-09 09:14:27浏览次数:29  
标签:el 第十八 value project 键值 key id select

参考链接:https://blog.csdn.net/qq_41885295/article/details/121956909

常规el-select时的用法是这样的

<el-form-item label="Project" style="flex: 1" :rules="[ { required: true, message: '', trigger: 'blur' },]">
   <el-select v-model="form.ProjectRelated" style="width: 100%" placeholder="select a project" @change="projectchange($event)">
      <el-option :label="pro.project_name" :value="pro.project_id" v-for="pro in form.Projectlist" :key="pro.project_id" ></el-option>
   </el-select>
</el-form-item>

 

 

v-model得到的是el-option选中时value的值,即project_id的值。label是在筛选框中显示的值,即project_name的值。value是选中project_name时返回的project_id的值,会给到ProjectRelated。v-for是循环语句,循环整个project列表。key是循环时唯一的键值。@change是当选定一个选项时触发的函数,$event传递的是form.ProjectRelated的值。

 

不过有时候我们的需求是当选中选项时获取整条project的信息,而不仅仅是project_id,这是我们就需要用到value-key键值

<el-form-item label="Project" style="flex: 1" :rules="[ { required: true, message: '', trigger: 'blur' },]">
   <el-select v-model="form.ProjectRelated" value-key="project_id" style="width: 100%" placeholder="select a project" @change="projectchange($event)">
       <el-option :label="pro.project_name" :value="pro" v-for="pro in form.Projectlist" :key="pro.project_id" ></el-option>
   </el-select>
</el-form-item>

 

这个value-key就是在pro中指定其中的一个唯一性键值,这里用的是project_id。这样当你选中其中一个project项时,返回的就是整个pro对象,而不是pro.project_id了。

 

标签:el,第十八,value,project,键值,key,id,select
From: https://www.cnblogs.com/smart-zihan/p/17750670.html

相关文章

  • 高效数据传输:Java通过绑定快速将数据导出至Excel
    摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言把数据导出至Excel是很常见的需求,而数据的持久化,往往又放在数据库中。因此把数据库中的数据导出到Excel中,成了非常普遍的一个需求......
  • shell脚本中的多行注释
     001、[root@pc1test01]#lsa.sh[root@pc1test01]#cata.sh##测试脚本#!/bin/bash:"##冒号和双引号之间有一个空格(也可以是单引号)xxxxxxxyyyyyyyyyyy##注释内容zzzzzzzz"((sum=8+9+......
  • python xml(ElementTree)
    pythonxml处理(ElementTree)1.模块导入fromxml.etree.ElementTreeimportElementTree,Element,SubElement2.对象概述ElementTree:表示整个xml层级结构Element:表示树形结构中的父节点SubElement:表示树形结构中的所有子节点,有些节点既可以是父节点,也可以是子节点3.Elem......
  • 已经安装了Excel,提示“您没有安装Excel软件!”
    已经安装了Excel,提示“您没有安装Excel软件!” 1)重新安装Office ----------------------2)修改注册表 找到excel图标,点击右键,发现出现没有安装excel的提示,可能是安装版本的问题,也有可能是注册表被删除 win+R键,跳出运行弹窗,输入regedit,点击确认 选择打开HKEY_LOCAL_MACHINE文件......
  • Laravel RCE后渗透利用
    引言水一篇文章,本文介绍了常规laravel组件RCE后的简单后渗透利用,常见的RCENday例如:CVE-2021-3129,篇幅内很多利用方式与AsperaFaspexRCE后渗透利用文章中类似,因此就不赘述了。维持权限RCE通过反弹shell命令,获取ncshell,但此时shell并不是完全交互式的,并且维持权限不方便,不......
  • NetCore Ocelot 之 Qos
    QosqualityofserviceOcelotsupportsoneQoscapabilityatthecurrenttime.YoucansetonaperRoutebasisifyouwanttouseacircuitbreakerwhenmakingrequeststoadownstreamservice.Thisusesanawesome.NETlibrarycalledPolly.Thefirstthi......
  • arm32_shellcode
    arm32_shellcode题目文件build.sh#!/bin/basharm-linux-gnueabi-gcc-g-static-Iinclude-ochalchal.clibcapstone.achal.c#include<stdio.h>#include<string.h>#include<sys/mman.h>#include<stdlib.h>#include<ctype.h>#......
  • vue封装搜索组件,自定义elment搜索组件
    组件案例<template><divclass="dialog-search"><el-form:inline="true"ref="ruleForm":model="formInline"class="demo-form-inlinetop-screen"><divclass="to......
  • NetCore Ocelot 之 Load Balancer
    OcelotcanloadbalanceacrossavailabledownstreamservicesforeachRoute.ThismeansyoucanscaleyourdownstreamservicesandOcelotcanusethemeffectively.TheTypeofloadbalanceravailbleare:  LeastConnection -trackswhichservicearedeal......
  • shell 实现harbor 指定仓库镜像tags 查询
    1.需求背景1.1容器发布ci成功以后我们希望CD时候可以选择相关镜像1.2统计指定仓库镜像有多少个版本2.shell代码#!/bin/bash#harbor关键环境变量HARBOR_URL=""USERNAME=""PASSWORD=""PAGE_SIZE=50imges_head=$(echo"$HARBOR_URL"|awk-F//'{print$2}')pr......