Vue.js中如何为DataTable渲染绑定点击事件的编辑按钮

@click是Vue专属的模板语法，只会在Vue编译组件模板阶段被解析绑定。你用jQuery DataTable的render配置返回的是原生HTML字符串，这部分内容完全不会经过Vue的编译流程，所以写在字符串里的@click不会被识别为事件绑定，点击自然不会触发。
另外你原有代码的字符串拼接存在语法错误，属性引号位置错乱，就算不考虑事件绑定，渲染出来的DOM结构本身也是不符合规范的。

不要在render返回的字符串里写Vue模板语法，改用事件委托的方式绑定点击事件，不管表格怎么重绘、分页、排序都能稳定触发，实现步骤如下：

1. 修改DataTable的列渲染配置，给编辑按钮加专属类名做标识，通过data-*属性存行索引/行ID，修正原有的字符串拼接错误：

$('#users').DataTable({
    data: response.data,
    columns: [
         { data: 'id' },
         { data: 'role_id' },
         { data: 'name' },
         { data: 'email' },
         {
            data: null,
            className: "dt-center editor-edit",
            render: function (data, type, row, meta) {
                 return `<input type="button" class="name table-edit-btn" 
                          data-row-index="${meta.row}" 
                          value="Name"/>`
            },
            orderable: false
          }
     ]
})

2. 在Vue组件的生命周期里给表格根节点绑定委托事件，监听动态生成的按钮点击，触发你写好的业务方法，记得组件销毁时移除事件避免内存泄漏：

export default {
  mounted() {
    // 绑定委托事件到表格父节点，兼容动态渲染的内容
    $('#users').on('click', '.table-edit-btn', this.handleEditClick)
  },
  beforeUnmount() {
    // 组件卸载时移除事件
    $('#users').off('click', '.table-edit-btn', this.handleEditClick)
  },
  methods: {
    toggleModal(rowData) {
      // 你原有的弹窗逻辑
      console.log('编辑行数据', rowData)
    },
    handleEditClick(e) {
      const btn = e.currentTarget
      const rowIndex = Number(btn.dataset.rowIndex)
      // 直接从DataTable实例获取对应行的完整数据
      const tableIns = $('#users').DataTable()
      const currentRowData = tableIns.row(rowIndex).data()
      // 调用业务方法
      this.toggleModal(currentRowData)
    }
  }
}

如果你确实需要在动态渲染的按钮上用Vue的指令、语法，可以在DataTable的drawCallback钩子中，每次表格重绘完成后拿到DOM，用Vue的compile方法手动编译这部分内容后再挂载。但这个方案在数据量大、表格频繁重绘时会有明显性能损耗，仅适合小数据量场景使用。

注意：如果不是必须用Vue模板语法，优先选事件委托方案，稳定性和性能都更好，也不需要处理编译、重复挂载的边界问题。

内容的提问来源于stack exchange，提问作者K.S. Azim