如何在Quasar q-table中为列添加可跳转的href链接？

你遇到的问题是因为Quasar的q-table的format属性默认会把返回的内容当作纯文本渲染，不会解析HTML字符串，所以直接返回<a>标签是无效的。下面给你两种可行的解决方案：

方法一：使用自定义列插槽（推荐） #

这种方式灵活性最高，能完全控制列内容的渲染，还能使用Quasar的q-link组件（比原生<a>更适配Vue路由）：

<template>
  <q-page>
    <div class="row justify-center">
      <q-table 
        :data="data" 
        :columns="columns" 
        row-key="id" 
        selection="single" 
        :selected.sync="selected" 
        :filter="filter" 
        :loading="loading"
      >
        <!-- 自定义Title列的内容 -->
        <template v-slot:body-cell-title="props">
          <q-link :to="`/#/offer/${props.row.id}`">
            {{ props.row.title }}
          </q-link>
        </template>

        <!-- 自定义Edit列的内容 -->
        <template v-slot:body-cell-action="props">
          <q-link :to="`/#/account/offers/edit/${props.row.id}`">
            编辑
          </q-link>
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script>
export default {
  // ... 其他代码
  data() {
    return {
      // ... 其他数据
      columns: [
        { name: 'title', required: true, label: 'Title', align: 'left', field: 'title', sortable: true },
        { name: 'category', label: 'Category', field: 'category', sortable: true },
        { name: 'payment', label: 'Payment', field: 'payment' },
        { name: 'action', label: 'Edit', field: 'id' } // 这里field可随意填写，因为插槽会覆盖内容
      ]
    }
  }
}
</script>

方法二：使用Render函数（Vue 2）/ h函数（Vue 3） #

如果你更倾向于在columns配置里直接处理，可以用渲染函数来生成链接元素：

Vue 2版本： #

columns: [
  { 
    name: 'title', 
    required: true, 
    label: 'Title', 
    align: 'left', 
    field: row => row.title, 
    sortable: true,
    render: (h, props) => {
      return h('a', {
        attrs: {
          href: `/#/offer/${props.row.id}`
        }
      }, props.row.title)
    }
  },
  { name: 'category', label: 'Category', field: 'category', sortable: true },
  { name: 'payment', label: 'Payment', field: 'payment' },
  { 
    name: 'action', 
    label: 'Edit', 
    field: 'id',
    render: (h, props) => {
      return h('a', {
        attrs: {
          href: `/#/account/offers/edit/${props.row.id}`
        }
      }, '编辑')
    }
  }
]

Vue 3版本（使用h函数）： #

import { h } from 'vue'

// ...

columns: [
  { 
    name: 'title', 
    required: true, 
    label: 'Title', 
    align: 'left', 
    field: row => row.title, 
    sortable: true,
    render: (props) => {
      return h('a', {
        href: `/#/offer/${props.row.id}`
      }, props.row.title)
    }
  },
  // ... 其他列
  { 
    name: 'action', 
    label: 'Edit', 
    field: 'id',
    render: (props) => {
      return h('a', {
        href: `/#/account/offers/edit/${props.row.id}`
      }, '编辑')
    }
  }
]

补充说明： #

• 如果你的项目用了Vue Router，推荐使用<router-link>或者Quasar的<q-link>组件，而不是原生<a>标签，这样可以实现单页应用的无刷新跳转。
• 上面的代码中我用了props.row.id作为uuid，你可以根据实际数据字段替换成props.row.uuid或者其他对应的字段。

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