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>