下面是我的子组件和父组件的Vue代码，它将显示从API中提取的员工详细信息，我们可以单击特定行的表格格式。
当我点击特定行时，如何在新标签中显示完整的行详细信息？我是javascript和vue.js新手，请帮助我如何做到这一点...
下面是子组件EmployeList.vue

<template>
    <div>

        <h1>Employee List</h1>
        <table border ="1px" id="tableData">
           <tr>
             <td>Name</td>
             <td>Salary</td>
             <td>Age</td>
           </tr>
           
           <tr  v-for="item in list" v-bind:key="item.id">
            <td><el-link type="primary" href="" target="_blank" onclick="myFunction()">{{item.employee_name}}</el-link></td>
            <td>{{item.employee_salary}}</td>
            <td>{{item.employee_age}}</td>

           </tr>

           
    
        </table>

    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(axios,VueAxios)

    export default 
    {
        name:'EmployeList',
        props: ['employeName','employeSalary','employeAge'],
        data()
        {
            return{list: undefined,}
        },

        mounted()
        {
            axios.get('http://dummy.restapiexample.com/api/v1/employees').then((resp)=>
            {
                this.list = resp.data.data;
                console.warn(resp.data.data)
            })
        },
        methods:
        {
            myFunction()
            {
                
             
            }
        }
    }
</script>


<style scoped>

</style>

这里是父组件索引。vue

<template>
  <div>
   
    <EmployeList />
    
    
 
  </div>
</template>

<script>

import EmployeList from '../components/EmployeList.vue'



export default {
    name: "Index",
    components: {EmployeList},
    data(){
      return {
        name:'Vishwas',
        channel: 'CodeEvolution',
      }
    },

}
</script>

<style>
#app{
  font-family: Avenir, Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

}

</style>