Vue.js中点击vue-good-table列表商品名称跳转详情页的实现方案

第一步：先修正现有代码的语法错误 #

你现有代码存在两处会导致列表无法正常渲染的问题，先修复：

• data配置语法错误：return: 多了冒号，row: []; 分号改为逗号，变量名统一为rows（和axios赋值的变量名对应）
• 确保接口/project/api/list返回的每条商品数据都包含id字段，供路由跳转传参使用

第二步：修改列配置+自定义名称列的渲染模板 #

vue-good-table支持通过插槽自定义列内容，你可以直接给名称列渲染可跳转的路由链接，修改后完整代码如下：

<template>
    <vue-good-table
            :columns="columns"
            :rows="rows"
            :search-options="{
              enabled: true,
              externalQuery: searchTerm,
            }"
    >
      <!-- 自定义名称列模板 -->
      <template slot="table-column" slot-scope="props">
        <!-- 判断当前列是名称列时渲染跳转链接 -->
        <span v-if="props.column.field === 'name'">
          <router-link :to="{name: 'detail-product', params: {id: props.row.id}}">
            {{ props.row.name }}
          </router-link>
        </span>
        <!-- 其他列正常渲染原有内容 -->
        <span v-else>
          {{ props.formattedRow[props.column.field] }}
        </span>
      </template>
    </vue-good-table>
</template>
<script>
export default {
  data() {
    return {
       rows: [],
       columns: [
        {
          label: "Name",
          field: "name",
        },
        {
          label: "Price",
          field: "price",
        },
        {
          label: "Quantity",
          field: "quantity",
        },
      ],
    }
  },
  created() {
     axios
        .get("/project/api/list")
        .then((res) => {
            this.rows = res.data;
        })
  }
}
</script>

可选实现方式：点击事件跳转 #

如果你不想用router-link组件，也可以通过绑定点击事件实现跳转，把插槽部分的代码替换成下面的即可：

<template slot="table-column" slot-scope="props">
  <span v-if="props.column.field === 'name'" style="cursor: pointer;color: #1890ff;" @click="goDetail(props.row.id)">
    {{ props.row.name }}
  </span>
  <span v-else>
    {{ props.formattedRow[props.column.field] }}
  </span>
</template>

然后在methods里添加跳转方法：

methods: {
  goDetail(id) {
    this.$router.push({
      name: 'detail-product',
      params: { id }
    })
  }
}

额外提示：你当前路由配置里的详情页组件指向的是list.vue，如果这是你手误写错了，记得改成实际的商品详情页组件路径，否则跳转后会显示列表页而非详情页。

内容的提问来源于stack exchange，提问作者deskeay