利用 Custom Elements 实现可配置的表格组件-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的发展，越来越多的应用需要复杂的数据展示和交互。其中，表格是最常见的一种数据展示形式之一。前端开发者们通常都需要编写一些通用的表格组件，以方便在不同的应用中使用。

本文将介绍如何利用 Custom Elements 实现一个可配置的表格组件，既可以展示静态数据，也可以支持动态数据的添加和删除。

Custom Elements 简介

Custom Elements 是 Web Components 中的一种规范，用于自定义 HTML 元素。它可以让我们像使用原生 HTML 元素一样使用自定义元素，并支持高度自定义行为和样式。

Custom Elements 由两个主要的构造函数组成：customElements.define() 和 HTMLElement。前者用于定义自定义元素类，后者用于创建自定义元素的实例。

下面是一个简单的例子，定义了一个名为 my-element 的自定义元素：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.textContent = 'Hello, world!';
  }
}

customElements.define('my-element', MyElement);

现在我们可以在 HTML 中使用 <my-element> 标签来创建该自定义元素的实例，该实例的内容为 Hello, world!。

实现可配置的表格组件

首先，我们需要定义一个 table-component 元素，用于展示表格数据：

// javascriptcn.com 代码示例
class TableComponent extends HTMLElement {
  constructor() {
    super();
    const columns = JSON.parse(this.getAttribute('columns'));
    const rows = JSON.parse(this.getAttribute('rows'));
    const table = document.createElement('table');

    // 创建表头
    const thead = document.createElement('thead');
    const tr = document.createElement('tr');
    for (let column of columns) {
      const th = document.createElement('th');
      th.textContent = column.label;
      tr.appendChild(th);
    }
    thead.appendChild(tr);
    table.appendChild(thead);

    // 创建表格内容
    const tbody = document.createElement('tbody');
    for (let row of rows) {
      const tr = document.createElement('tr');
      for (let column of columns) {
        const td = document.createElement('td');
        td.textContent = row[column.prop];
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    }
    table.appendChild(tbody);

    this.appendChild(table);
  }
}

customElements.define('table-component', TableComponent);

通过 JSON 格式的数据传入 columns 和 rows，组件会自动渲染对应的表格。

接下来，我们需要支持动态数据的添加和删除功能。我们可以再定义两个子组件，分别用于添加数据和删除数据：

// javascriptcn.com 代码示例
class AddRowComponent extends HTMLElement {
  constructor() {
    super();
    const table = this.parentElement.parentElement;
    const columns = JSON.parse(table.getAttribute('columns'));
    const form = document.createElement('form');

    for (let column of columns) {
      const label = document.createElement('label');
      label.textContent = column.label;
      const input = document.createElement('input');
      input.setAttribute('name', column.prop);
      form.appendChild(label);
      form.appendChild(input);
    }

    const button = document.createElement('button');
    button.textContent = 'Add';
    button.addEventListener('click', (event) => {
      event.preventDefault();
      const formData = new FormData(form);
      const newRow = {};
      for (let name of formData.keys()) {
        newRow[name] = formData.get(name);
      }
      const rows = JSON.parse(table.getAttribute('rows'));
      rows.push(newRow);
      table.setAttribute('rows', JSON.stringify(rows));
      table.render();
    });

    this.appendChild(form);
    this.appendChild(button);
  }
}

customElements.define('add-row-component', AddRowComponent);

class DeleteRowComponent extends HTMLElement {
  constructor() {
    super();
    const table = this.parentElement.parentElement;
    const rows = JSON.parse(table.getAttribute('rows'));

    const select = document.createElement('select');
    const option = document.createElement('option');
    option.disabled = true;
    option.selected = true;
    option.textContent = 'Select a row';
    select.appendChild(option);
    for (let i = 0; i < rows.length; i++) {
      const option = document.createElement('option');
      option.value = i;
      option.textContent = `Row ${i + 1}`;
      select.appendChild(option);
    }

    const button = document.createElement('button');
    button.textContent = 'Delete';
    button.addEventListener('click', (event) => {
      event.preventDefault();
      const index = select.selectedIndex - 1;
      if (index < 0) {
        return;
      }
      const rows = JSON.parse(table.getAttribute('rows'));
      rows.splice(index, 1);
      table.setAttribute('rows', JSON.stringify(rows));
      table.render();
    });

    this.appendChild(select);
    this.appendChild(button);
  }
}

customElements.define('delete-row-component', DeleteRowComponent);

添加数据组件会生成一个表单，用户可以输入新的数据，点击 Add 按钮后新增一行数据。删除数据组件会生成一个下拉框，用户可以选择要删除的行，点击 Delete 按钮后删除对应的数据。

最后，我们需要把这些组件结合起来，定义一个包含添加数据和删除数据功能的完整表格组件：

<table-component columns='[{"prop": "id", "label": "ID"}, {"prop": "name", "label": "Name"}, {"prop": "age", "label": "Age"}]' rows='[{"id": "1", "name": "Alice", "age": "20"}, {"id": "2", "name": "Bob", "age": "30"}, {"id": "3", "name": "Charlie", "age": "40"}]'>
  <add-row-component></add-row-component>
  <delete-row-component></delete-row-component>
</table-component>

在 HTML 中，我们可以传入表格的列和数据，以及添加和删除数据组件。当用户点击添加或删除数据的按钮时，组件会自动更新表格数据并重新渲染表格。这样，我们就实现了一个可配置的表格组件，可以方便地嵌入到不同的应用中使用。

总结

本文介绍了如何利用 Custom Elements 实现一个可配置的表格组件，通过组合多个子组件实现了动态数据的添加和删除功能。Custom Elements 让我们可以轻松地定制 HTML 元素，使复杂应用的开发更加简单和高效。希望本文能够对你的前端开发工作有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6538f8f27d4982a6eb229540