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 ...
随机推荐
- JAVA学习笔记-09
多线程: 进程:就是正在执行中的程序,每一个进程执行都有一个执行的顺序,该顺序是一个执行路径.或者叫一个控制单元. 线程:就是进程中的一个独立的控制单元,线程在控制着进程的执行 一个进程中至少有一个线 ...
- 读后笔记 -- Python 全栈测试开发 Chapter10:接口的设计与开发
10.1 Django 框架 1. 几个主流的框架: 1)适合初学者的接口框架:Django,Flask 2)针对底层定义:Twisted 3)实现高并发:Tornado 2. install // ...
- 实验1task5
<实验结论> #include <stdio.h> #include <stdlib.h> int main() { float a,b,c; printf(&qu ...
- PVD模板
void PVD_Init(void){ EXTI_InitTypeDef EXTI_InitStructure; NVIC_InitTypeDef NVIC_InitStructure; //--- ...
- charles小程序抓包
参考链接:https://www.jianshu.com/p/048b67c5ed00 1. 手机上的程序目前按app的抓包方式,配置代 理,下载证书,打开设备---微信---本地网络,就可以直接抓包 ...
- Linux安装证书
Linux安装 vCenter root CA: 1.访问vCenter管理页面,下载"下载受信任的根 CA 证书" 2.压缩文件内带有数字作为扩展名(.0..1 等)的文件是根证 ...
- PowerShell学习笔记二_变量、Select、Foreach、where、自动变量
变量声明/定义变量使用$作为前缀,例如:$A.$var等.定义一:$mysqlservice=Get-Service -Name mysql ,获取mysql服务对象获取所有服务$services=G ...
- Windows初始化.net core环境
1.项目使用.ner core版本(例:.net core.3.1) 1.1安装运行环境 https://dotnet.microsoft.com/en-us/download 1.2安装.net 运 ...
- Java 类实现接口
1. 一个类的直接父类是唯一的,但是一个类可以同时实现多个接口 public class MyInterfaceImpl implements MyInterfaceA, MyInterfaceB { ...
- maven的setting.xml配置文件详解
<?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...