Svelte 和 Bootstrap 表事件处理程序丢失答案

【问题标题】：Svelte and Bootstrap-table events handlers lostSvelte 和 Bootstrap 表事件处理程序丢失
【发布时间】：2022-09-26 21:01:55
【问题描述】：

我正在尝试将 bootstrap-table 与 svelte 集成，效果已应用于表，但 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>

在本例中，在应用 bootstrapTable() 时不再调用 delete_user；

这是一个尝试的链接，如果您在应用引导表之前按删除，它会在它不再工作之后工作：

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

【问题讨论】：

标签： svelte bootstrap-table

【解决方案1】：

以下是操作流程：

Svelte 正在创建表格 html 并将其写入页面
然后您就可以在这个 HTML 表上运行 bootstrap-table，
Bootstrap-table 正在用它自己的和它自己的事件替换原来的 HTML。
正如您所指出的，谁在做什么的混杂会导致您出现问题。

通过在创建引导表时在 JS 中定义所有列和数据，您会得到更好的服务。

您可以通过 data 选项将 users 变量直接传递给 bootstrap-table： https://bootstrap-table.com/docs/api/table-options/#data

对于带有按钮的列，请参阅格式化程序列选项： https://bootstrap-table.com/docs/api/column-options/#formatter

您可以在列的“格式化程序”中定义自己的 html 和事件，并在单击按钮时调用“delete_user”。

这填补了一些 icky 和“Svelte 之外”，但您调用的是 JQuery 函数，所以它带有领土。

【讨论】：