Element UI 父组件el-tabel选择某行跳转子组件,在子组件的el-table中选择数组,添加到父组件操作行中
解决思路:
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中选择数组,添加到父组件操作行中的更多相关文章
- FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)
目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
随机推荐
- 14-K8S之helm入门到逃跑
目录 helm入门 1.helm介绍 2.helm核心术语 3.helm下载和安装 3.1以helm3.6为测试实例 3.2以helm3.7.2为例 helm v2版本在集群上部署Tiller 1.创 ...
- Twenty-nine
组件的声明周期 声明周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段. 声明周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动 ...
- [Oracle19C 数据库管理] 加载和传输数据库
移动数据的通用架构 数据泵data pump(impdp, expdp),借助DBMS_DATAPUMP存储过程,可以进行表的导出导入,行记录的导出导入,表空间的导出导入或者整个schema的导出导入 ...
- ubuntu20.04系统中扩展swap分区
1.首先停止/swapfile #swapon /swapfile 2.删除以前的/swapfile #rm -rf swapfile 3.创建新的/swapfile(以2G为例) #dd if=/d ...
- 小程序modal弹窗
[注意]css放的位置可能影响效果 参考a-level competitionFilterCover 1.容器:position: absolute; top: 100vh; animation: m ...
- 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 ...
- Java之时间类
时间类 Date类 ZonedDateTime: 带时区的时间 ZoneId: 带时区 Instant: 时间戳 日期格式化类 SimpleDateFormat DateTimeFormatter D ...
- 1.win10安装centos虚拟机并设置允许远程
一.下载并安装 打开如下连接,下载VMware和CentOS7镜像安装好虚拟机 http://t.zoukankan.com/onlymate-p-9837651.html这个链接的镜像是7.0的,我 ...
- iOS开发 React Native与iOS交互汇总
RN简介 React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架.起源于faceBbook内部,2013开源. React Native ...
- mac SIP系统完整性保护关闭方法
许多Mac用户反应,装了部分软件后打不开,那可能是sip系统完整性没有关闭.下面我们就来看一下如何关闭sip系统完整性. 检查状态 在sip系统完整性关闭前,我们先检查是否启用了SIP系统完整性保护. ...