Vue.js 3中使用simple-datatables时点击事件失效问题求助

simple-datatables是原生JavaScript表格插件，它会重新渲染表格的DOM结构。你在Vue模板中写的按钮会被插件替换成新生成的DOM元素，这些新元素没有经过Vue的编译处理，所以Vue的@click绑定无法生效。

可以通过事件委托的方式处理点击事件，或者利用插件的回调钩子手动绑定事件，以下是具体实现：

方法1：事件委托（推荐） #

在表格的父容器上监听点击事件，判断点击目标是否是"Detalles"按钮：

<template>
  <div ref="tableContainer">
    <table id="myTable">
      <tr>
        <td class="td-action"> 
          <button class="btn-detalles"> Detalles </button>
        </td>
        <td> name 1 </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { DataTable } from 'simple-datatables';

const tableContainer = ref(null);

const handleClickDetails = () => {  
  console.log("Here....... ");
  alert("Here!");
};

onMounted(() => {
  new DataTable("#myTable");
  
  // 给容器添加事件委托
  tableContainer.value.addEventListener('click', (e) => {
    if (e.target.classList.contains('btn-detalles')) {
      handleClickDetails();
    }
  });
});
</script>

方法2：利用插件的draw回调 #

每次表格重绘（比如分页、排序后），手动给按钮绑定事件：

<script setup>
import { onMounted } from 'vue';
import { DataTable } from 'simple-datatables';

const handleClickDetails = () => {  
  console.log("Here....... ");
  alert("Here!");
};

onMounted(() => {
  const dataTable = new DataTable("#myTable");

  // 监听表格draw事件，每次重绘后绑定事件
  dataTable.on('draw', () => {
    document.querySelectorAll('.btn-detalles').forEach(btn => {
      // 先移除旧事件避免重复绑定
      btn.removeEventListener('click', handleClickDetails);
      btn.addEventListener('click', handleClickDetails);
    });
  });
});
</script>

• 避免在Vue模板中直接给simple-datatables生成的元素用Vue指令绑定事件，因为插件会替换DOM，导致绑定失效。
• 事件委托的方式更高效，无需每次重绘都重新绑定事件；而draw回调方式适合需要针对每一行做不同处理的场景（比如需要获取行数据）。

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