当前位置: 首页 > news >正文

浅写:vs-select的传参方法,传递一整行参数,而不是单个

<template><div><div style="display: flex; justify-content: center;"><vs-button @click="ControlGroupAndRoleVisible"><i class='bx bxs-paint-roll'></i> 分配班级按钮</vs-button><vs-dialog not-close v-model="GroupAndRoleVisible"><template #header><div style="display: flex;flex-direction: column;align-items: center"><h4 class="not-margin">管理员您好请选择你需要分配的 <b>教员和班级</b></h4><vs-select v-model="selectedTeacher" placeholder="选择教员"><vs-option v-for="teacher in teachers" :key="teacher.id" :label="teacher.name" :value="teacher.name">{{ teacher.name }}</vs-option></vs-select><vs-select v-model="selectedClass" placeholder="选择班级"><vs-option v-for="clas in classes" :key="clas.id" :label="clas.classname" :value="clas.classname">{{ clas.classname }}</vs-option></vs-select><vs-button @click="assignClasss()" style="width: 200px"><i class='bx bxs-paint-roll'></i> 确认</vs-button></div></template></vs-dialog></div><vs-table><template #header><vs-input  v-model="search" border placeholder="Search" /></template><template #thead><vs-tr><vs-th style="width: 200px" sort @click="users = $vs.sortData($event ,users, 'name')">教员名</vs-th><vs-th style="width: 200px" sort @click="users = $vs.sortData($event ,users, 'userNumber')">教员账号</vs-th><vs-th style="width: 200px" sort @click="users = $vs.sortData($event ,users, 'classid')">管理的班级Id</vs-th><vs-th style="width: 200px" sort @click="users = $vs.sortData($event ,users, 'groupid')">管理的班级名</vs-th><vs-th>操作区</vs-th></vs-tr></template><template #tbody><vs-tr:key="i"v-for="(tr, i) in $vs.getPage($vs.getSearch(users, search), page, max)":data="tr":is-selected="!!selected.includes(tr)"not-click-selectedopen-expand-only-td><vs-td>{{ tr.teacherNumber }}</vs-td><vs-td>{{ tr.teacherName }}</vs-td><vs-td>{{ tr.classid }}</vs-td><vs-td>{{ tr.className }}</vs-td><vs-td>{{ tr.roleid }}</vs-td><vs-td>{{ tr.completeTeam }}</vs-td></vs-tr></template><template #footer><vs-pagination v-model="page" :length="$vs.getLength(users, max)" /></template></vs-table></div>
</template>
<script>export default {data:() => ({search: '',page: 1,max: 10,active: 0,selected: [],users: [],GroupAndRoleVisible:false,Inputclassid:'',selectedTeacher:'' ,selectedClass:'' ,teachers:[] ,classes:[],}),methods:{GetAllUserInfo(){this.$ManagerApi.getTeacherClass().then(res=>{this.users=res.data.AllInfo}).catch(err=>console.log(err))this.$ManagerApi.selectAllClass().then(res=>{this.classes=res.data.dataobject}).catch(err=>console.log(err))this.$ManagerApi.findAllTeacher().then(res=>{this.teachers=res.data.dataobject}).catch(err=>console.log(err))},ControlGroupAndRoleVisible(){this.GroupAndRoleVisible=true},assignClasss(){console.log(this.teachers.find(teacher => teacher.name === this.selectedTeacher))}},mounted() {this.GetAllUserInfo();}}
</script><style></style>

 

关键:

assignClasss(){
  console.log(this.teachers.find(teacher => teacher.name === this.selectedTeacher))
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 《云原生安全攻防》-- 容器攻击案例:Docker容器逃逸
  • Git进阶(十四):Windows下 git 提示 Repository not found
  • 如何评估AI模型:评估指标的分类、方法及案例解析
  • JMeter进行HTTP接口测试的技术要点
  • C语言 | Leetcode C语言题解之第236题二叉树的最近公共祖先
  • Pycharm与Gitlab交互
  • 探索大模型能力--prompt工程
  • 【轻松拿捏】Java都有哪些特性?
  • 怎么做度假酒店神秘顾客调查?
  • RflySim工具链常见问题解答
  • Kafka接收消息
  • 《简历宝典》12 - 简历中“项目经历”,内功学习 - 下篇
  • 2024最新最全面的软件测试自动化面试题(含答案)
  • 网络爬虫Scrapy shell 的使用和介绍
  • STM32+TMC2209控制步进电机正反转。
  • (三)从jvm层面了解线程的启动和停止
  • CEF与代理
  • ES2017异步函数现已正式可用
  • ES学习笔记(12)--Symbol
  • leetcode388. Longest Absolute File Path
  • nginx 负载服务器优化
  • Redis字符串类型内部编码剖析
  • v-if和v-for连用出现的问题
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 【干货分享】dos命令大全
  • mysql面试题分组并合并列
  • #Datawhale AI夏令营第4期#AIGC文生图方向复盘
  • #Datawhale X 李宏毅苹果书 AI夏令营#3.13.2局部极小值与鞍点批量和动量
  • #QT(智能家居界面-界面切换)
  • #Z0458. 树的中心2
  • (2)STM32单片机上位机
  • (6)添加vue-cookie
  • (Matalb时序预测)PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • (PADS学习)第二章:原理图绘制 第一部分
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (十)c52学习之旅-定时器实验
  • (十八)devops持续集成开发——使用docker安装部署jenkins流水线服务
  • (十八)SpringBoot之发送QQ邮件
  • (文章复现)基于主从博弈的售电商多元零售套餐设计与多级市场购电策略
  • (一)UDP基本编程步骤
  • (已解决)报错:Could not load the Qt platform plugin “xcb“
  • ***利用Ms05002溢出找“肉鸡
  • .NET Core 2.1路线图
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .net 程序发生了一个不可捕获的异常
  • .net 开发怎么实现前后端分离_前后端分离:分离式开发和一体式发布
  • .net流程开发平台的一些难点(1)
  • 。。。。。
  • /3GB和/USERVA开关
  • [023-2].第2节:SpringBoot中接收参数相关注解
  • [Android]创建TabBar
  • [BZOJ1060][ZJOI2007]时态同步 树形dp
  • [C#][DevPress]事件委托的使用