vuejs table router-link 标记一个

Question

我想在我的table上添加一个路由器link，直到这里一切正常，但是有这样的情况。我希望它显示为 href。 Table 当我做 router tag="a" 时被损坏当我设置router tag="tr"时，没有问题，但用户可能想通过右击鼠标打开那个页面并打开一个新的window。因此，如果您能举例说明我如何继续，我将很高兴。从现在开始谢谢你。

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> 标签作为 <td> 的包装器而不是 <tr>.

也许您可以将另一个 <td> 添加到您的 table 以在那里显示 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>

Answer 2

您尝试做的是行不通的，因为 table 有一个集合结构，不允许 <a> 标签成为 <tbody> 的子标签.

您可以做的是使用 position: absolute 将您的 link“拉伸”到整行，基本上将其置于所有其他内容之上。请注意，这样做会取消 table 中的所有其他互动内容。喜欢按钮和输入。

我从 Bootstrap 复制了 class/css，但即使您不使用它也应该可以使用。

请记住将 position: relative; 放在 <tr> 上，这样 link 就会正确包含在每一行中。

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>

vuejs table router-link 标记一个

vuejs table router-link tag a

vue.js

routerlink