如何用Web Components实现支持自定义JS的主从表格，透传slot到tx-row组件？

实现方案（纯原生Web Components，无额外框架依赖） #

这里提供两种改动量极小的原生实现思路，都不需要引入第三方框架：

方案1：slot透传（支持用户自定义首列内容，灵活度高）

这种方案可以保留slot的灵活性，支持用户传入任意内容作为行首列，不止局限于复选框：

• 先在tx-table组件的模板中声明命名slot，用于接收用户传入的首列模板

  <slot name="row-prefix" hidden></slot>
  

• 改造你现有生成tx-row的循环逻辑，将拿到的slot内容克隆后注入到每个tx-row的对应slot位置：

  // 取到用户传入的首列模板
  const rowPrefixTemplate = this.querySelector('slot[name="row-prefix"]');
  for (let tx of txlist) {
         let txRowContent = `
           <tx-row
            data-price="${this.price ?? 0}"
            // 保留原有所有属性
           >
         `;
         // 如果有传入首列模板，就克隆注入
         if (rowPrefixTemplate) {
           const clonedPrefix = rowPrefixTemplate.cloneNode(true);
           txRowContent += `<div slot="row-prefix">${clonedPrefix.innerHTML}</div>`;
         }
         txRowContent += `</tx-row>`;
         let txRow = document.createRange().createContextualFragment(txRowContent);
         this.tbody.append(txRow);
         // 绑定复选框的自定义事件，也可以直接抛到外层由使用者处理
         txRow.querySelector('[slot="row-prefix"] input[type="checkbox"]')?.addEventListener('change', (e) => {
           this.dispatchEvent(new CustomEvent('row-select', {
             detail: {
               txData: tx,
               checked: e.target.checked
             }
           }));
         });
  }
  

• 最后在tx-row组件的模板首列位置预留对应slot即可：

  <tr>
    <td class="row-prefix-col">
      <slot name="row-prefix"></slot>
    </td>
    <!-- 保留原有其他列的代码 -->
  </tr>
  

  使用时直接在外层传入复选框即可：

  <tx-table>
    <input slot="row-prefix" type="checkbox" class="select-checkbox">
  </tx-table>
  

方案2：属性开关控制（简单直接，适合固定复选框场景）

如果首列就是固定的选择复选框，不需要支持自定义内容，直接给tx-table加个属性开关更简单：

• 给tx-table新增show-select-column布尔属性，观测属性值变化
• 当属性为true时，自动给表头加全选复选框，生成tx-row时自动给每行注入复选框和选中逻辑，不需要用户传入任何slot内容，改动量更小。

两种方案都完全基于原生Web Components能力实现，不需要引入任何额外框架，符合你轻量化的要求。

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