vue.js - vuejs 表路由器链接标签a
问题描述
我想在我的表中添加一个路由器链接,直到这里一切正常,但是有这样的情况。我希望它显示为href。当我执行 router tag="a" 时表损坏当我设置 router tag="tr" 时,没有问题,但用户可能希望通过右键单击鼠标打开该页面并打开一个新窗口。因此,如果您能举例说明我将如何进行,我会很高兴。从现在开始谢谢你。
const app = new Vue({
el: '#app',
data: {
userList: [
{
id: 1,
name: "Prem",
age: 18,
status: "close",
gender: "male",
},
{
id: 2,
name: "Chandu",
status: "close",
age: 20,
gender: "female",
},
{
id: 3,
name: "Shravya",
status: "open",
age: 35,
gender: "female",
},
{
id: 4,
name: "Shravya",
status: "blocked",
age: 35,
gender: "female",
}
]
}
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<router-link
tag="tr"
v-for="(user, i) in userList" :key="i"
:to="{ name: 'UserDetail', params: { id:user.id }}"
>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.status }}</td>
<td>{{ user.gender }}</td>
</router-link>
</tbody>
</table>
</div>
解决方案
您尝试执行的操作将不起作用,因为表具有固定结构,不允许<a>
标记成为<tbody>
.
相反,您可以做的是使用position: absolute
将链接“拉伸”到整行,基本上将其置于所有其他内容之上。请注意,这样做会取消表格中的所有其他交互式内容。像按钮和输入。
我已经从Bootstrap复制了 class/css ,但即使你不使用它也应该可以工作。
请记住放置position: relative;
在您<tr>
的位置,以便链接将正确包含在每一行中。
new Vue({
el: '#app',
data() {
return {
userList: [{
id: 1,
name: "Prem",
age: 18,
status: "close",
gender: "male",
},
{
id: 2,
name: "Chandu",
status: "close",
age: 20,
gender: "female",
},
{
id: 3,
name: "Shravya",
status: "open",
age: 35,
gender: "female",
}
]
}
}
});
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0, 0, 0, 0);
}
.position-relative {
position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app" style="padding: 1rem;">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, i) in userList" class="position-relative">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.status }}</td>
<td>
{{ user.gender }}
<!-- This can be placed in any of the <td>'s -->
<a class="stretched-link" :href="`#${user.id}`"></a>
</td>
</tr>
</tbody>
</table>
</div>
推荐阅读
- python-3.x - Mongodb Join on _id field from to ObjectId
- smtp - Odoo12:在 Odoo 中使用 Sendinblue 设置 SMPT 服务器。我在这里错过了什么?
- r - createDataPartition 函数在 Rstudio 中不起作用
- android - 如何知道无障碍服务是否将被停止或终止?
- sql - 当当前月份状态在oracle中为空时,如何获取前几个月的最大记录
- python - 尝试访问行索引时出现 Pandas KeyError
- java - Java spring 多微服务与 keylock
- r - 将 h5 文件上传到闪亮的 fileInput
- nginx - 带有上游的 nginx 有时会延迟 1 分钟
- google-apps-script - 使用 Google Apps 脚本设置 JIT Tailwind CSS