SvelteKit中实现同一页面多按钮分别打开含不同表格的Dialog组件

我完全懂你的困扰——两个按钮都要触发模态框，但现在不管点哪个都显示同一张表格，之前试了用两个独立的showModal1、showModal2变量没搞定，还不能改按钮里的dialog.showModal()调用，因为这是原生<dialog>标签必需的方法对吧？

给你两个实用的方案，都能解决问题：

方案一：用单个状态变量区分表格类型 #

这个方案不用搞多个模态框实例，只用一个状态标记当前要展示的表格，代码更简洁：

首先在页面组件的脚本里定义状态：

<script>
  let showModal = false;
  let currentTable = null; // 用来存当前要显示的表格标识
  let dialog; // 绑定到Dialog元素的引用
</script>

然后给每个按钮写对应的点击函数，打开模态框的同时标记表格类型：

<Button callFunction={() => {
  currentTable = 'tableA';
  showModal = true;
  dialog.showModal();
}}>Check Records (Table A)</Button>

<Button callFunction={() => {
  currentTable = 'tableB';
  showModal = true;
  dialog.showModal();
}}>Check Records (Table B)</Button>

最后在模态框里根据currentTable的值渲染对应的表格：

{#if showModal}
<Dialog bind:this={dialog} on:close={() => {
  showModal = false;
  currentTable = null; // 关闭时重置状态
}}>
  {#if currentTable === 'tableA'}
    <table>
      <thead>
        <tr><th>Table A 列1</th><th>Table A 列2</th></tr>
      </thead>
      <tbody>
        <tr><td>A数据1</td><td>A数据2</td></tr>
      </tbody>
    </table>
  {:else if currentTable === 'tableB'}
    <table>
      <thead>
        <tr><th>Table B 列1</th><th>Table B 列2</th></tr>
      </thead>
      <tbody>
        <tr><td>B数据1</td><td>B数据2</td></tr>
      </tbody>
    </table>
  {/if}
</Dialog>
{/if}

这个思路的核心是用一个状态变量切换内容，模态框本身只实例化一次，通过状态控制内部显示的表格，完全符合你不能改dialog.showModal()调用的要求。

方案二：独立的模态框实例（解决你之前的问题） #

你之前用两个showModal变量没成功，大概率是因为没给每个模态框绑定独立的dialog引用！每个<dialog>标签都需要自己的实例引用，不然调用showModal()的时候会触发同一个框。

先封装一个可复用的Dialog组件（可选，但能减少重复代码）：

<!-- CustomDialog.svelte -->
<script>
  export let showModal = false;
  export let dialog;
</script>

{#if showModal}
<Dialog bind:this={dialog} on:close>
  <slot /> <!-- 用slot传递不同的表格内容 -->
</Dialog>
{/if}

然后在页面里使用两个独立的模态框实例：

<script>
  let showModalA = false;
  let showModalB = false;
  let dialogA; // Table A对应的dialog实例
  let dialogB; // Table B对应的dialog实例
</script>

<Button callFunction={() => {
  showModalA = true;
  dialogA.showModal();
}}>Open Table A</Button>

<Button callFunction={() => {
  showModalB = true;
  dialogB.showModal();
}}>Open Table B</Button>

<!-- Table A的模态框 -->
<CustomDialog bind:dialog={dialogA} bind:showModal={showModalA} on:close={() => showModalA = false}>
  <table>
    <!-- 这里是Table A的内容 -->
    <tr><td>Table A专属内容</td></tr>
  </table>
</CustomDialog>

<!-- Table B的模态框 -->
<CustomDialog bind:dialog={dialogB} bind:showModal={showModalB} on:close={() => showModalB = false}>
  <table>
    <!-- 这里是Table B的内容 -->
    <tr><td>Table B专属内容</td></tr>
  </table>
</CustomDialog>

这样每个按钮对应自己的模态框实例和状态，完全独立，不会互相干扰，完美解决你之前遇到的问题。

备注：内容来源于stack exchange，提问作者John