Vue结合DataTables时router-link未正确渲染为a标签的问题求助

我明白你遇到的核心问题了：当你把<router-link>作为字符串插入到DataTables的行数据中时，这段字符串只是纯文本，并没有被Vue的编译器处理——DataTables是直接操作DOM渲染表格的，Vue没有机会识别并编译这段<router-link>标签，所以它会被原样输出，而不是转换成预期的<a>标签。

下面给你几个可行的解决方案，从简单到复杂，你可以根据需求选择：

方案一：使用原生标签 + Vue Router编程式导航（最推荐） #

这种方法无需依赖Vue对自定义标签的编译，直接用普通<a>标签，通过监听点击事件调用Vue Router的编程式导航实现跳转，简单且稳定。

修改你的视图组件代码：

// 视图组件的script部分
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      headers: [
        { title: 'Name' },
        { title: ' ' }
      ],
      rows: []
    }
  },
  computed: mapGetters({ clientLeads: 'clientLeads' }),
  watch: {
    clientLeads (val) {
      // 生成带自定义属性的a标签，而非router-link字符串
      const rows = val.map(item => {
        return [
          item.name,
          `<a href="javascript:void(0)" class="view-lead" data-lead-id="${item.id}">
            <i class="fa fa-eye"></i>
          </a>`
        ]
      })
      this.rows = rows
    }
  },
  mounted() {
    // 用事件委托监听表格内的点击事件（DataTables动态渲染，直接绑定事件会失效）
    $(this.$el).on('click', '.view-lead', (e) => {
      const leadId = e.currentTarget.dataset.leadId
      // 调用Vue Router的编程式导航跳转
      this.$router.push(`/lead_details/${leadId}`)
    })
  },
  created () {
    this.$store.dispatch('getClientLeads', { status: this.status })
  }
}

这个方案的优势是改动极小，不需要修改DataTables组件的代码，而且和router-link的跳转效果完全一致（包括路由守卫、历史记录等特性）。

方案二：让Vue手动编译DataTables中的动态内容 #

如果你一定要使用<router-link>标签，可以在DataTables渲染完成后，手动让Vue编译对应的DOM元素。

修改DataTables组件的代码：

// DataTables组件的script部分
import 'datatables.net-bs4'
import jQuery from 'jquery'
import Vue from 'vue' // 确保引入Vue

export default {
  template: "<table class=\"table table-striped dt-responsive nowrap\" style=\"width:100%\"></table>",
  props: {
    headers: { default () { return {} } },
    rows: { default () { return [] } }
  },
  data () { return { dtHandle: null } },
  watch: {
    rows (val) {
      const vm = this
      vm.dtHandle.clear()
      vm.dtHandle.rows.add(vm.rows)
      vm.dtHandle.draw()

      // 等待DataTables渲染完成后，手动编译DOM
      Vue.nextTick(() => {
        // 找到所有包含router-link的单元格
        const targetCells = vm.$el.querySelectorAll('td:contains("<router-link")')
        targetCells.forEach(cell => {
          // 创建临时容器，编译单元格内的HTML
          const tempContainer = document.createElement('div')
          tempContainer.innerHTML = cell.innerHTML
          // 将临时容器挂载到当前Vue实例，触发编译
          vm.$mount(tempContainer)
          // 替换单元格内容为编译后的DOM
          cell.innerHTML = tempContainer.innerHTML
        })
      })
    }
  },
  mounted () {
    const vm = this
    vm.dtHandle = jQuery(this.$el).DataTable({
      classes: { sWrapper: 'dataTables_wrapper dt-bootstrap4' },
      columns: vm.headers,
      data: vm.rows,
      searching: false,
      paging: false,
      info: true,
      responsive: { details: { type: 'column' } }
    })
  }
}

不过这个方案需要注意：DataTables的DOM操作比较频繁，频繁编译可能会有性能损耗，而且如果表格数据量大，不推荐使用。

方案三：使用DataTables的columns.render结合Vue渲染函数 #

这种方案需要调整数据结构，让DataTables的行数据是对象而非数组，然后通过自定义render函数生成router-link的真实DOM。

步骤1：修改视图组件的rows生成逻辑 #

watch: {
  clientLeads (val) {
    // 生成对象数组，而非数组的数组
    this.rows = val.map(item => ({
      name: item.name,
      id: item.id
    }))
  }
},
data () {
  return {
    // 调整headers，指定data字段对应行对象的属性
    headers: [
      { title: 'Name', data: 'name' },
      { title: ' ', data: 'id' }
    ],
    rows: []
  }
}

步骤2：修改DataTables组件的columns配置 #

mounted () {
  const vm = this
  vm.dtHandle = jQuery(this.$el).DataTable({
    classes: { sWrapper: 'dataTables_wrapper dt-bootstrap4' },
    columns: vm.headers.map(col => {
      // 判断是否是操作列，自定义render逻辑
      if (col.data === 'id') {
        return {
          ...col,
          render: function(data, type, row) {
            // 使用Vue的$createElement生成router-link虚拟DOM
            const routerLink = vm.$createElement('router-link', {
              props: { to: `/lead_details/${row.id}` }
            }, [vm.$createElement('i', { class: 'fa fa-eye' })])
            
            // 将虚拟DOM转换为真实HTML字符串
            const tempEl = vm.$createElement('div').$el
            vm._vnode = routerLink
            vm._update(routerLink)
            const html = tempEl.innerHTML
            vm._vnode = null
            
            return html
          }
        }
      }
      return col
    }),
    data: vm.rows,
    searching: false,
    paging: false,
    info: true,
    responsive: { details: { type: 'column' } }
  })
}

这个方案更贴合Vue的组件化思想，但需要调整数据结构和DataTables的配置，适合对代码结构有要求的场景。

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