当我单击表的一个特定行时，它应该在新选项卡中显示该特定行的详细信息.如何在Vue.js中实现?我是JS和Vue的新手.&

Question

下面是我的子组件和父组件的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>

这里是父组件index.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>

Answer 1

您可以使用@click来处理表行上的单击事件，因此您应该将其添加到<tr>中，如下所示:

<tr @click="doSomething">
....
</tr>

现在你应该在methods中定义doSomething:

export default {
...
methods: {
doSomething () {
// Put what you want to do here
}
}
...
}

现在你想打开一个新的选项卡，你可以在js中使用window对象这样做:

window.open('http://example.com')

此外，您应该将单击的行id发送到一个新选项卡，因此您可以在函数中定义argument，如下所示:

<tr v-for="item in list" :key="item.id" @click="doSomething(item.id)">
....
</tr>

export default {
...
methods: {
doSomething (id) {
window.open('http://example.com/showDetail?id='+id)
}
}
...
}