解决思路:

  1、在父组件选择操作某行数据时,将父组件的行号暂存(index)。

  2、跳转子组件页面,选择某行数据,点击提交将该行数据传递个父组件

  3、父组件取到第一步暂存行号(index),将子组件传回的字段赋给父组件 List[index].key

父组件代码如下:

<template>
<div id="app">
<el-table :data="List">
<el-table-column align="center" prop="modelAlias" label="物料编号" ></el-table-column>
<el-table-column align="center" prop="materialName" label="物料名称"></el-table-column>
<el-table-column align="center" label="选择/清空产品">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="selectTarget(scope.row,scope.$index)" v-if="!scope.row.targetProduct">请选择</el-button>
<el-button size="mini" type="text" @click="clear(scope.row,scope.$index)" v-else>清空</el-button>
</template>
</el-table-column>
<el-table-column align="center" prop="targetProduct" label="产品"></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="deleteRow(scope.row,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<select-product @func="select" ref="selectProduct"></select-product>
</div>
</template> <script>
import selectProduct from "./select-product";
export default {
components: {
selectProduct //声明组件
},
data() {
return {
List:[
{modelAlias: "N0001", materialName: '轴承',targetProduct: null },
{modelAlias: "N0202", materialName: '物料2', targetProduct: null},
{modelAlias: "N3333", materialName: '传送带', targetProduct: null}
],
temp: null //暂存操作行号(index)
};
},
methods:{
selectTarget(row,index) {
this.temp = index //将行号暂存给temp
this.$refs.selectProduct.openDialog() //调用子组件方法打开子组件el-dialog对话框
},
select(res) {
// 监听子组件事件, res--子组件传回参数
let temp = this.temp
this.List[temp].targetProduct = res.name
},
clear(row,index){
//清空选择
row.targetProduct = null
},
deleteRow(row,index){
// 删除table中某行数据
this.List.splice(index, 1)
}
}
};
</script> <style scoped> </style>

子组件代码如下:select-product.vue

<template>
<el-dialog title="选择目的产品" :visible.sync="open" width="1100px">
<el-table :data="selectList">
<el-table-column align="center" prop="number" label="目的产品编码" ></el-table-column>
<el-table-column align="center" prop="name" label="产品名称"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="submitSelect(scope.row)">确定</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
</template> <script>
export default{
data(){
return{
selectList:[
{ number: 'ML001', name: '成品1' },
{ number: 'ML022', name: '成品222' },
{ number: 'ML033', name: '成品3333' },
],
open: false
}
},
methods:{
openDialog() {
this.open = true;
},
closeDialog() {
this.open = false;
},
submitSelect(row){
this.$emit('func',row);
this.open = false;
}
}
}
</script> <style>
</style>

Element UI 父组件el-tabel选择某行跳转子组件,在子组件的el-table中选择数组,添加到父组件操作行中的更多相关文章

  1. FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  2. vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

    在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...

  3. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  4. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  5. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  6. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  7. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  8. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  9. element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  10. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

随机推荐

  1. 14-K8S之helm入门到逃跑

    目录 helm入门 1.helm介绍 2.helm核心术语 3.helm下载和安装 3.1以helm3.6为测试实例 3.2以helm3.7.2为例 helm v2版本在集群上部署Tiller 1.创 ...

  2. Twenty-nine

    组件的声明周期 声明周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 声明周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动 ...

  3. [Oracle19C 数据库管理] 加载和传输数据库

    移动数据的通用架构 数据泵data pump(impdp, expdp),借助DBMS_DATAPUMP存储过程,可以进行表的导出导入,行记录的导出导入,表空间的导出导入或者整个schema的导出导入 ...

  4. ubuntu20.04系统中扩展swap分区

    1.首先停止/swapfile #swapon /swapfile 2.删除以前的/swapfile #rm -rf swapfile 3.创建新的/swapfile(以2G为例) #dd if=/d ...

  5. 小程序modal弹窗

    [注意]css放的位置可能影响效果 参考a-level competitionFilterCover 1.容器:position: absolute; top: 100vh; animation: m ...

  6. Demo of canvas, canvas optimization and svg

    It used the canvas to draw the curves in the old project, and the client felt that it was vague, so ...

  7. Java之时间类

    时间类 Date类 ZonedDateTime: 带时区的时间 ZoneId: 带时区 Instant: 时间戳 日期格式化类 SimpleDateFormat DateTimeFormatter D ...

  8. 1.win10安装centos虚拟机并设置允许远程

    一.下载并安装 打开如下连接,下载VMware和CentOS7镜像安装好虚拟机 http://t.zoukankan.com/onlymate-p-9837651.html这个链接的镜像是7.0的,我 ...

  9. iOS开发 React Native与iOS交互汇总

    RN简介 React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架.起源于faceBbook内部,2013开源. React Native ...

  10. mac SIP系统完整性保护关闭方法

    许多Mac用户反应,装了部分软件后打不开,那可能是sip系统完整性没有关闭.下面我们就来看一下如何关闭sip系统完整性. 检查状态 在sip系统完整性关闭前,我们先检查是否启用了SIP系统完整性保护. ...