Svelte和Bootstrap-Table活动处理程序失去了

Question

我正在尝试将Bootstrap-table与Svelte集成在一起，将效果应用于表格，但on：on：click处理程序被删除，据我了解，Bootstrap-table正在破坏表并重新创建桌子，因此所有事件处理程序都丢失了，有办法解决吗？

这是一个示例：

<script>

    import { onMount } from 'svelte';    
    let users=[{id:1,name:"Adam",age:30},{id:2,name:"David",age:28}];
    
        const delete_user = (id)=>{
            users = users.filter((user) => user.id !== id);     
          }    

        onMount(async () => {
          jQuery('#table').bootstrapTable(); 
        });
    
    </script>

      <table class="table table-bordered table-striped m-4" id="table"  data-search="true" >
        <thead>
            <tr><th  data-sortable="true" >Name</th>
              <th data-sortable="true">Age</th>
              <th >Delete</th></tr>
        </thead>
        <tbody>
            {#each users as user}
            <tr>
            <td>{user.name}</td><td>{user.age}</td>
            <td><button on:click={() => delete_user(user.id)} >Delete</button></td>
            </tr>
            {/each}
        </tbody>
    </table>

在此示例中，应用BootTraptable（）在应用BootTraptable时不再调用Delete_user;

这是一个尝试一下的链接，如果您在应用Boostrap-table之前按DELETE，则它不再起作用后可以工作：

https://svelte.dev/repl/01aeb031bd8046f8046f8b2d161eadb2d161ead0bedf89?version = 3.48.0

Answer 1

这是操作流程：

1. Svelte正在创建表HTML，然后将其写入
2. 您的页面上，然后在此HTML表上运行Bootstrap-table，
3. Bootstrap-table正在用自己的事件替换原始的HTML。

正如您所指出的那样，谁在做谁正在做的事情，导致了您的问题。

在创建Bootstrap-table时，通过在JS中定义列和数据来为您提供更好的服务。

您可以通过数据选项将用户变量直接传递给Bootstrap-table：
https：//bootstrap-table.com/docs/docs/docs/docs/api/table-table-table-table-table-pace- /＃数据

对于带有按钮的列，请参阅“格式”列选项：
https：//bootstrap-table.com/docs/docs/docs/column-column-column-umn-poctions /＃formatter

您可以为列定义自己的HTML和“格式化”中的事件，并且在单击按钮时，您可以呼叫'delete_user'。

这充满了一些奇怪的和“在Svelte之外”，但是您正在打电话给jQuery功能，因此它随着该领域而带来。