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

如何解决如何对表格中的部分进行分组？

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

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

<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',{
          trim: '2016-05-04',{
          trim: '2016-05-01',{
          trim: '2016-05-08',{
          trim: '2016-05-06',{
          trim: '2016-05-07',],};
  },methods: {
    handleClose(done) {
      this.$confirm('Are you sure you want to close this?')
        .then(() => {
          done();
        })
        .catch(() => {});
    },};
</script>

解决方法

您可能希望将 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>