如何为svelte-simple-datatables添加点击事件获取选中行数据

核心原理是利用组件提供的行插槽自定义行元素，直接绑定点击事件获取当前行数据。

完整实现示例 #

<script>
  // 引入组件
  import Datatable from 'svelte-simple-datatables'
  
  // 表格原始数据，替换为你自己的数据源
  const tableData = [
    { id: 1, name: '张三', department: '技术部', joinDate: '2023-01-15' },
    { id: 2, name: '李四', department: '产品部', joinDate: '2022-09-30' },
    { id: 3, name: '王五', department: '运营部', joinDate: '2023-03-20' }
  ]

  // 声明存储选中行数据的变量
  let selectedRow = null
</script>

<!-- 表格组件使用自定义行插槽 -->
<Datatable data={tableData} let:row>
  <!-- 给tr绑定点击事件，点击时把当前行的row数据赋值给selectedRow -->
  <tr 
    on:click={() => selectedRow = row}
    class:selected={selectedRow?.id === row.id}
    style="cursor: pointer;"
  >
    <!-- 渲染对应列数据 -->
    <td>{row.id}</td>
    <td>{row.name}</td>
    <td>{row.department}</td>
    <td>{row.joinDate}</td>
  </tr>
</Datatable>

<!-- 可选：展示选中的行数据验证效果 -->
{#if selectedRow}
<div class="selected-info">
  已选中行数据：{JSON.stringify(selectedRow, null, 2)}
</div>
{/if}

<style>
  /* 可选：选中行高亮样式 */
  tr.selected {
    background-color: #e6f7ff;
  }
</style>

补充说明 #

• 如果你使用的是列配置自动渲染模式，不需要手动写td，部分版本的svelte-simple-datatables支持内置的rowClick事件，可以直接这么写：<Datatable {data} columns={yourColumns} on:rowClick={(e) => selectedRow = e.detail.row} />
• 如果需要多选存储，可以把selectedRow改为数组，点击时判断是否已存在，存在就删除，不存在就push进去即可。

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