表格的选择弹窗,选中后返显到表格中

项目场景:

提示:这里简述项目相关背景:

表格的下拉框可以直接显示选项,那如果选择框不是下拉的,而是弹窗,那么在表格中如何返显呢?


问题描述

如上图所示,点击表格中的选择,出现一个弹窗,在弹窗中选择后,需要返显到表格中(返显到表格,不是表单)


解决方案:

提示:这里填写该问题的具体解决方案:

点击事件传参时利用scope的另一个属性  scope.$index ,scope.row可以获取当前行的数据,而 scope.$index 可以得到点击的是表格的哪一条(第几个)数据。

下面是一个可编辑/查看的弹窗,弹窗中有表格,表格的选项是弹窗型式的,要求点击选项弹窗后表格要显示选中的数据

1:父组件

1:html

<template><!-- 编辑查看的弹窗 --><Dialog v-model="dialogVisible" :title="questionTitle" :width="props.questionWidth" :close-on-click-modal="false" :close-on-press-escape="false"><!-- 型式试验 --><QuestionType ref="child1":tableList="questionData.testList":title="'型式试验'"@carSelect="carSelect"/><template #footer><el-button type="primary" @click="submitForm">暂 存</el-button><el-button @click="dialogVisible = false">取 消</el-button></template></Dialog>
</template>

2:ts

<script setup lang="ts">
import QuestionType from './questionTable/questionType.vue'
defineOptions({ name: 'questionCheckEdit' })
//接收父组件传过来的值
const props = defineProps({questionWidth:{type:String,default:"100%",//默认编辑/查看 弹窗宽度100%},
})
interface questioninter{status:number|string,testList:Array<yearAdd1Item>,
}
interface yearAdd1Item{questionsCode:string|number,questionsCategory:string|number,questionsSubCategory:string|number,questionsNature:string|number,happenType:string|number,proposedTime:string|number,vehicleModel:string|number,questionsSource:string|number,
}const questionData=ref<questioninter>({status:0,testList:[],
})
const questionTitle=ref("");//弹窗类型 编辑/查看
const dialogVisible = ref(false) // 查看/编辑 弹窗的是否展示默认不展示
/** 打开弹窗 请求数据*/
const loading=ref(true)
const questionCheckEditOpen = (params) => {dialogVisible.value = true;if(params.btnType=="edit"){questionTitle.value="编辑";}else{questionTitle.value="查看";}loading.value=true;YearPerformanceApi.getYearPerformance(params.row.id).then(res=>{// 数据请求成功关闭 loading效果loading.value=false;questionData.value=resif(res.testList==null){questionData.value.testList=[]}})
}
defineExpose({ questionCheckEditOpen }) // 提供 open 方法,用于打开弹窗//引入 emits 将子组件的数据变化传给父组件 
// 通知列表 
const emits=defineEmits(["success",
]);
// 父组件接受子组件发过来的选中的数据 父组件给那一条数据 赋值
const carSelect=(params)=>{if(params.arr=="testList"){//如果是型式试验questionData.value.testList[params.index].vehicleModel=params.res}
}// 提交输入的表格
const submitForm=(status:number)=>{}</script>
<style scoped></style>

2:子组件

1:html

<template><ContentWrap><h5 class="titleGB">{{ props.title }}</h5><el-table ref="tableRef":data="props.tableList" :stripe="true" :show-overflow-tooltip="true" :border="true":header-cell-style="{textAlign:'center'}":cell-style="{textAlign:'center'}"><el-table-column type="selection" width="80" fixed="left" /><el-table-column label="问题性质说明"min-width="160"prop="questionsNature"/><el-table-column label="车型"min-width="160"prop="vehicleModel"><template #default="scope"><div style="display:flex"><el-input v-model="scope.row.vehicleModel" placeholder="请选择车型" disabled/><el-buttonv-if="!disabled"link type="primary"@click="carType(row,scope.$index)">选择</el-button></div></template></el-table-column></el-table></ContentWrap><!-- 车型选择弹窗 --><ProjectPickModelref="projectPickModelRef"dialog-title="选择车型":is-multiple="false"width="60%"@on-pick-change="projectOnPickChange"/>
</template>

2:ts

<script setup lang="ts">
import ProjectPickModel from "@/views/components/ProjectPickModel.vue";
defineOptions({ name: 'questionType' })
//接收父组件传过来的值
const props = defineProps({tableList:{type:Array,},title:{type:String,default:"型式试验"},disabled:{type:Boolean,default:false,}
})const tableRef =ref() // 表格ref
// =======================================操作表格// 车型的选择按钮 点击打开车型选择弹窗
const selectedIndex=ref<string|number>();//选中的那一行的index
const projectPickModelRef =ref();
// 点击选择 打开选择车型的弹窗 获取点击的数据的index
const carType=async (row,index)=>{//调用选择车型的自定义open方法 打开这个弹窗  也可以用父组件控制 车型弹窗的显示/隐藏projectPickModelRef.value.open();selectedIndex.value=index;
}
// 车型选择
const projectOnPickChange = (selectedRow: any) => {if (selectedRow.length > 0) {const res=selectedRow[0].engineModel;//获得选中的车型let params={res:res,index:selectedIndex.value,}//将选中的 数据 和 点击表格的index传给父组件,让父组件 赋值emits("carSelect",params)}
}
</script>
<style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/474160.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4.STM32之通信接口《精讲》之USART通信---实验串口发送程序

本节将进行实战&#xff0c;基础了解请查看第1&#xff0c;2&#xff0c;3节&#xff08;Whappy&#xff09; 开始背&#xff01;&#xff01; USART ---》全双工 异步/同步 点对点 C语言基础printf用法&#xff0c;这节将用到printf的重定向&#xff0c;来打印到串口助手上…

搭建MC服务器

局域网中玩MC&#xff0c;直接自己创建房间开启局域网就可以了。如果想开一个24小时不关机的服务器呢&#xff1f;其实最开始我是想在windows云服务器&#xff0c;图形化界面运行一个开启局域网即可。可能是云服务器上没有显卡&#xff0c;还是其他什么原因&#xff0c;游戏打开…

css 使用图片作为元素边框

先看原始图片 再看效果 边框的四个角灭有拉伸变形,但是图片的中部是拉伸的 代码 border-style: solid;/* 设置边框图像的来源 */border-image-source: url(/static/images/mmwz/index/bk_hd3x.png);/* 设置如何切割图像 */border-image-slice: 66;/* 设置边框的宽度 */border…

通用定时器---输出比较功能

目录 一、概念 二、输出比较的8种模式 三、输出比较输出PWM波形的基本结构 配置步骤 四、示例代码 一、概念 OC&#xff08;OutPut Compare&#xff09;输出比较。输出比较可以通过比较CNT与CCR寄存器的关系&#xff0c;来对输出电平进行置1/置0/翻转的操作&#xff0c;可…

【网页设计】CSS3 进阶(动画篇)

1. CSS3 2D 转换 转换&#xff08;transform&#xff09;是CSS3中具有颠覆性的特征之一&#xff0c;可以实现元素的位移、旋转、缩放等效果 转换&#xff08;transform&#xff09;你可以简单理解为变形 移动&#xff1a;translate旋转&#xff1a;rotate缩放&#xf…

探索 HTML 和 CSS 实现的 3D旋转相册

效果演示 这段HTML与CSS代码创建了一个包含10张卡片的3D旋转效果&#xff0c;每张卡片都有自己的边框颜色和图片。通过CSS的3D变换和动画&#xff0c;实现了一个动态的旋转展示效果 HTML <div class"wrapper"><div class"inner" style"-…

WTV芯片在智能电子锁语音留言上的应用方案解析

一、概述 电子锁的留言功能允许用户通过语音或文字方式给其他家庭成员留下信息。这项功能可以增强家庭成员之间的沟通&#xff0c;特别是在忙碌的家庭生活中提供便利。 WTV是一款功能强大的高品质语音芯片&#xff0c;采用了高性能32位处理器、最高频率可达120MHz。具有低成本、…

Ajax的相关内容

一、Ajax的使用步骤 1.创建XML对象 const xhrnew XMLHttpRequest(); 2.监听事件&#xff0c;处理响应 3.准备发送请求 true表示异步 ajax中永远是异步&#xff0c;永远是true 4.发送请求 二、GET和POST请求 三、JSON的三种形式 四、JSON的方法 五、跨域 六、XHR的属性和方法…

群控系统服务端开发模式-应用开发-前端级别功能开发

一、添加视图 在根目录下src文件夹下views文件夹下param文件夹下grade文件夹下&#xff0c;新建index.vue&#xff0c;代码如下 <template><div class"app-container"><div class"filter-container" style"float:left;"><…

【含开题报告+文档+PPT+源码】基于springboot的教师评价系统的设计与实现

开题报告 随着信息技术的迅猛发展&#xff0c;教育信息化已成为现代教育的必然趋势。教研室作为高校教学管理的重要机构&#xff0c;肩负着提升教学质量、推动教学改革的重要使命。然而&#xff0c;传统的教学管理方式往往存在效率低下、数据分散、管理不便等问题&#xff0c;…

Nginx 使用入门介绍

大家好&#xff0c;我是G探险者&#xff01; 今天聊一聊nginx. Nginx 是一款高性能的 Web 服务器、反向代理服务器以及负载均衡器。它因其轻量级、稳定性和高并发处理能力&#xff0c;在全球范围内得到了广泛应用。许多大型网站&#xff08;如 Netflix、Dropbox 和 WordPress…

Elasticsearch 重建索引 数据迁移

Elasticsearch 重建索引 数据迁移 处理流程创建临时索引数据迁移重建索引写在最后 大家都知道&#xff0c;es的索引创建完成之后就不可以再修改了&#xff0c;包括你想更改字段属性或者是分词方式等。那么随着业务数据量的发展&#xff0c;可能会出现需要修改索引&#xff0c;或…

vue3 路由写法及传参方式 !超详细

Vue Router 是 Vue.js 官方的路由管理器。它主要用于单页面应用程序&#xff08;SPA, Single Page Application&#xff09;中&#xff0c;帮助解决页面导航、组件复用等问题。 基本的使用 1.router配置文件代码 创建一个ts文件,用来写路由器 // 创建一个路由器,并暴露出去 …

有限状态机(续)

一、添加刀光和场景 1、资源链接&#xff1a; 武器刀光&#xff1a;https://assetstore.unity.com/packages/tools/particles-effects/melee-weapon-trail-1728 场景&#xff1a;https://assetstore.unity.com/packages/3d/environments/fantasy/casual-tiny-environment-ju…

内网安全隧道搭建-ngrok-frp-nps-sapp

1.ngrok 建立内网主机与公网跳板机的连接&#xff1a; 内网主机为客户机&#xff1a; 下载客户端执行 2.frp

模电数电,融会贯通

模电与数电在传统电子工程中似乎被划分为两大领域&#xff0c;然而&#xff0c;它们实际上是对同一器件的不同应用方法。这种观念有助于我们理解元器件在各种工作状态下的多样性&#xff0c;并在复杂的电路设计中实现更高效的系统集成。 一、三极管的多重身份&#xff1a;放大…

鸿蒙动画开发07——粒子动画

1、概 述 粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。 动画元素是一个个粒子&#xff0c;这些粒子可以是圆点、图片。我们可以通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画&#xff0c;来营造一种氛围感&#xff0c;比如下…

Java——并发工具类库线程安全问题

摘要 本文探讨了Java并发工具类库中的线程安全问题&#xff0c;特别是ThreadLocal导致的用户信息错乱异常场景。文章通过一个Spring Boot Web应用程序示例&#xff0c;展示了在Tomcat线程池环境下&#xff0c;ThreadLocal如何因线程重用而导致异常&#xff0c;并讨论了其他并发…

PostgreSQL技术内幕18:物理备份工具pg_basebackup

0.简介 PG自带备份工具有多种&#xff0c;pg_basebackup、pg_dump、pg_dumpall&#xff0c;其中pg_basebackup是文件系统级别的备份&#xff0c;其余两种是逻辑备份。本文主要介绍PG备份工具产生的背景和概念&#xff0c;以及对pg_basebackup使用方法和其实现原理进行详细说明…

基于Python实现的HDR图像处理算法

此代码会读取两张图片&#xff0c;一张用于保留高光细节&#xff0c;另一张用于保留暗部细节。两张图片按指定比例进行像素融合&#xff0c;最终生成一张合成的HDR图片。 import cv2 import numpy as npdef hdr_fusion(highlight_img_path, shadow_img_path, output_path, alp…