如何对表格中的部分进行分组？答案

【问题标题】：How can I group sections within a table?如何对表格中的部分进行分组？
【发布时间】：2021-06-02 14:21:51
【问题描述】：

我正在使用 Vue 和 Element UI 来创建一个表格。目前，我正在尝试找出一种可能的方法来将 year/name 添加到弹出窗口并点击保存以使其显示为 ss 中显示的标题之一，旁边有“添加修剪”它？添加修剪按钮会将这些行添加到表中，但仅适用于该模型 year/name 组。

总而言之，我正在寻找一种方法将某些行与显示模型名称/年份的标题相关联。

<template>
  <div class="home">
    <div class="table-container">
      <div class="top-buttons">
        <div @click="override = true">add new override</div>
        <h1>Assigned checklist items</h1>
        <div @click="vehicle = true">add vehicle model</div>
      </div>
      <input type="text" placeholder="filter" class="filter" />
      <el-table :data="tableData" height="600" style="width: 100%">
        <el-table-column prop="trim" label="TRIM" width="200"> </el-table-column>
        <el-table-column prop="technical" label="TECHNICAL" width="170"> </el-table-column>
        <el-table-column prop="customer_delivery" label="CUSTOMER DELIVERY" width="170"> </el-table-column>
        <el-table-column prop="customer_acceptance" label="CUSTOMER ACCEPTANCE" width="170"> </el-table-column>
        <el-table-column prop="off_the_truck" label="OFF THE TRUCK" width="170"> </el-table-column>
        <el-table-column prop="vim" label="VIM" width="170"> </el-table-column>
      </el-table>
    </div>

    <!-- Add Vehicle Model -->
    <el-drawer title="Add vehicle model" :visible.sync="vehicle" :direction="direction" :before-close="handleClose">
      <div class="vehicle">
        <span>
          <label for="year">MODEL YEAR</label>
          <input type="text" id="year" v-model="modelYear" placeholder="Model Year" />
        </span>
        <span>
          <label for="model">MODEL NAME</label>
          <input type="text" id="model" v-model="modelName" placeholder="Model NAME" />
        </span>
      </div>
      <div class="buttons">
        <el-button type="primary">Save</el-button>
        <button class="cancel" @click="vehicle = false">Cancel</button>
      </div>
    </el-drawer>

    <!-- Add New Override -->
    <el-drawer title="Add new override" :visible.sync="override" :direction="direction" :before-close="handleClose">
      <span>Hi, there!</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      modelYear: '',
      modelName: '',
      vehicle: false,
      override: false,
      direction: 'rtl',
      filter: '',
      tableData: [
        {},
        {},
        {
          trim: '2016-05-03',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
        {
          trim: '2016-05-02',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
        {
          trim: '2016-05-04',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
        {
          trim: '2016-05-01',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
        {
          trim: '2016-05-08',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
        {
          trim: '2016-05-06',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
        {
          trim: '2016-05-07',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
        {
          trim: '2016-05-07',
          technical: 'Tom',
          customer_delivery: '123',
          customer_acceptance: '123',
          off_the_truck: '123',
          vim: '123',
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('Are you sure you want to close this?')
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>

【问题讨论】：

我们可能需要查看定义此表的 HTML（这样我们才能知道标记需要如何更改才能完成您要执行的操作）。当您现在单击“保存”时会发生什么？（是否有一个 JavaScript 事件监听器可以控制我们可以检查的这种行为？）
我会继续添加代码，但是因为我在这个项目中使用了 Element UI，所以它看起来并不完全像普通的 html
我只是在寻找想法，而不是真正精确的解决方案。只需要知道一条好路就可以了

标签： javascript html vue.js html-table datatable

【解决方案1】：

您可能希望将multiple tbody elements 添加到您的表格中，为每种车型添加一个。这使您可以对行进行分组，以便您的“添加修剪”脚本可以针对它所属的任何组。

这个例子很草率，使用了.insertAdjacentHTML 和一些格式化技巧。在现实生活中，我会使用一系列.createElement 和.appendChild 调用（或者更好的是<template> 元素，其内容可以在每次按钮单击时重复使用）——但希望这至少能让这个想法变得清晰。

（我预先填充了输入字段以使演示更易于使用。）

// Identifies some DOM elements
const
  yearInput = document.getElementById("year"),
  nameInput = document.getElementById("model"),
  saveBtn = document.getElementById("saveBtn"),
  table = document.getElementById("table");

// Adds click listeners
saveBtn.addEventListener("click", addModel);
table.addEventListener("click", addTrim); // Clicks will bubble up to table


// Defines click listeners

function addModel(){
// Adds a model-specific `tbody` element when "Save" is clicked

  if(!yearInput.value || !nameInput.value){ return; } // Requires both inputs

  // Creates the new markup
  const
    modelText = `${yearInput.value} ${nameInput.value}`,
    tbodyMarkup = `<tbody><tr><th><span class="model">${modelText}</span><button class="addTrim">Add trim</button></th><th></th><th></th></tr></tbody>`;

  // Clears the inputs
  yearInput.value = "";
  nameInput.value = "";

  // Inserts the tbody markup
  table.insertAdjacentHTML("beforeend", tbodyMarkup);
}


function addTrim(event){
  // Adds rows in the current `tbody` when "Add trim" is clicked

  const btn = event.target; // Remembers which element was clicked
  if(!btn.classList.contains("addTrim")){return;} // Ignores irrelevant clicks

  // Finds the ancestor `tbody`, and creates the new markup
  const
    tbody = btn.closest("tbody"),
    trimMarkup = `<tr><td>GLI (255)</td><td>xxx</td><td>xxx</td></tr><tr><td>R-LINE (222)</td><td>xxx</td><td>xxx</td></tr><tr><td>S (220)</td><td>xxx</td><td>xxx</td></tr>`;

  // Inserts the markup, and disables the button
  tbody.insertAdjacentHTML("beforeend", trimMarkup);
  btn.setAttribute("disabled", "");
}

input {width: 50px;}
button {margin-left: 15px;}
tbody>tr, td:first-child {text-align: left;}
th {border-top: 1px solid grey;}
th + th, td + td {border-left: 1px solid grey;}

<label>YEAR<input id="year" value="2010"/></label>
<label>NAME<input id="model" value="Corolla"/></label>
<button id="saveBtn">Save</button>
<hr/>
<table id="table">
  <thead>
    <tr><th>Trim</th><th>Technical </th><th>Delivery</th></tr>
  </thead>
  <tbody>
    <tr>
      <th><span class="yearAndModel">2019 Jetta </span><button class="addTrim" disabled>Add trim</button></th>
      <th></th>
      <th></th>
    </tr>
    <tr><td>GLI (255)</td><td>xxx</td><td> xxx</td></tr>
    <tr><td>R-LINE (222)</td><td>xxx</td><td> xxx</td></tr>
    <tr><td>S (220)</td><td>xxx</td><td> xxx</td></tr>
  </tbody>
</table>

【讨论】：