vuejs 表路由器链接标签a

Question

我想在我的表中添加一个路由器链接，到这里一切正常，但是有这样的情况。我希望它显示为href。 当我执行 router tag="a" 时，表已损坏 当我设置路由器标签=“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>

Answer 1

您尝试执行的操作不会起作用，因为表具有固定结构，不允许 <a> 标签成为 <tbody> 的子标签。

您可以做的是使用position: absolute 将您的链接“拉伸”到整行，基本上将其置于所有其他内容之上。请注意，这样做会取消表格中的所有其他交互式内容。像按钮和输入一样。

我已经从Bootstrap 复制了类/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>

Answer 2

也许这个问题只是发生了，因为您试图使用<a> 标记作为<td> 的包装器，而不是<tr>。

也许您可以将另一个 <td> 添加到您的表中以在其中显示 UserDetail。这可能是这样的：

<table>
<thead>
<tr>
  <th>Name</th>
  <th>Age</th>
  <th>Status</th>
  <th>Gender</th>
  <th>Details</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, i) in userList" :key="i">
  <td>{{ user.name }}</td>
  <td>{{ user.age }}</td>
  <td>{{ user.status }}</td>
  <td>{{ user.gender }}</td>
  <td>
    <router-link
        tag="a"
        :to="{ name: 'UserDetail', params: { id:user.id }}"
    >
      Show Details
    </router-link>
  </td>
</tr>
</tbody>
</table>