Svelte Carbon DataTable组件自定义事件处理指南

<script>
  // 导入DataTable组件
  import DataTable from 'carbon-components-svelte/src/DataTable.svelte';
  // 导入Svelte store，用于更方便地管理选中的行数据
  import { writable } from 'svelte/store';

  // 示例数据：表格的行数据
  let rows = [
    { id: 'row1', name: '张三', age: 28, city: '北京' },
    { id: 'row2', name: '李四', age: 32, city: '上海' },
    { id: 'row3', name: '王五', age: 25, city: '广州' },
    { id: 'row4', name: '赵六', age: 30, city: '深圳' },
  ];

  // 示例表头：定义表格的列
  let headers = [
    { key: 'name', value: '姓名' },
    { key: 'age', value: '年龄' },
    { key: 'city', value: '城市' },
  ];

  // 使用Svelte writable store来存储当前所有选中的行ID
  // 这样可以在组件的任何地方轻松访问和更新选中状态
  const selectedRowIds = writable([]);

  /**
   * 处理DataTable的行选择事件。
   * 当用户点击行的选择框时，此函数会被调用。
   * @param {CustomEvent<{ selected: boolean; row: DataTableRow; }>} event - Svelte自定义事件对象
   */
  function handleRowSelect(event) {
    // Svelte自定义事件的有效载荷（即事件携带的数据）通过event.detail属性访问
    const { selected, row } = event.detail;

    console.log(`行 ${row.id} (姓名: ${row.name}) 被 ${selected ? '选中' : '取消选中'}`);

    // 根据行的选中状态更新 selectedRowIds store
    if (selected) {
      // 如果行被选中，将其ID添加到数组中
      selectedRowIds.update(ids => [...ids, row.id]);
    } else {
      // 如果行被取消选中，从数组中移除其ID
      selectedRowIds.update(ids => ids.filter(id => id !== row.id));
    }
  }

  // Svelte的响应式声明：当selectedRowIds store的值变化时，会在控制台打印最新状态
  $: console.log('当前选中的行ID:', $selectedRowIds);
</script>

<style>
  /* 为教程文章添加一些基本样式，提升可读性 */
  h1 {
    color: #333;
    margin-bottom: 20px;
  }
  .info-box {
    margin-top: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border-left: 4px solid #007bff;
    color: #333;
    font-size: 0.9em;
  }
  button {
    margin-top: 15px;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
  }
  button:hover {
    background-color: #0056b3;
  }
</style>

<h1>Svelte Carbon DataTable 行选择事件处理示例</h1>

<p>点击下方表格中的行选择框，观察浏览器控制台的输出以及页面下方“当前选中信息”的变化。</p>

<!-- 
  DataTable组件的使用：
  - bind:rows={rows} 和 bind:headers={headers} 用于绑定表格数据和列定义。
  - selectable={true} 启用行的选择功能，这会显示每行前的复选框。
  - on:click:row--select={handleRowSelect} 是监听自定义事件的关键。
    当DataTable内部派发'click:row--select'事件时，handleRowSelect函数将被调用。
-->
<DataTable
  bind:rows={rows}
  bind:headers={headers}
  selectable={true}
  on:click:row--select={handleRowSelect}
/>

<div class="info-box">
  <p>当前选中行数量: {$selectedRowIds.length}</p>
  <p>选中的行ID: {$selectedRowIds.length > 0 ? $selectedRowIds.join(', ') : '无'}</p>
</div>

<!-- 添加一个按钮用于清空所有选择 -->
<button on:click={() => selectedRowIds.set([])}>
  清空所有选择
</button>