Fatal编程技术网
  • javascript/
  • Javascript 如何在一个表中对节进行分组？

Javascript 如何在一个表中对节进行分组？

javascript html vue.js

Javascript 如何在一个表中对节进行分组？,javascript,html,vue.js,html-table,datatable,Javascript,Html,Vue.js,Html Table,Datatable,我正在使用Vue和Element UI创建一个表。目前，我正试图找出一种可能的方法，在弹出窗口中添加一个年份/名称，然后点击save，使其显示为ss中显示的标题之一，旁边有“add trim”？“添加修剪”按钮会将这些行添加到表中，但仅适用于该型号年份/名称组 总而言之，我正在寻找一种方法，将某些行与表示型号名称/年份的标题相关联 添加新覆盖 指定的检查表项目 添加车型 车型年 型号名称 拯救 取消 你好！ 导出默认值{ 姓名：'家'， 数据（）{ 返回{ 车型年款：''， 型号名称：“”，

我正在使用Vue和Element UI创建一个表。目前，我正试图找出一种可能的方法，在弹出窗口中添加一个年份/名称，然后点击save，使其显示为ss中显示的标题之一，旁边有“add trim”？“添加修剪”按钮会将这些行添加到表中，但仅适用于该型号年份/名称组

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


添加新覆盖
指定的检查表项目
添加车型
车型年
型号名称
拯救
取消
你好！
导出默认值{
姓名：'家'，
数据（）{
返回{
车型年款：''，
型号名称：“”，
车辆:错,，
覆盖：false，
方向：“rtl”，
筛选器：“”，
表格数据：[
{},
{},
{
修剪：“2016-05-03”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
{
修剪：“2016-05-02”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
{
修剪：“2016-05-04”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
{
修剪：“2016-05-01”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
{
修剪：“2016-05-08”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
{
修剪：“2016-05-06”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
{
修剪：“2016-05-07”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
{
修剪：“2016-05-07”，
技术：“汤姆”，
客户交付：'123'，
客户验收：“123”，
从卡车上下来：“123”，
维姆：“123”，
},
],
};
},
方法：{
手柄闭合（完成）{
此.$confirm（'您确定要关闭此吗？'）
.然后（（）=>{
完成（）；
})
.catch（（）=>{}）；
},
},
};
您可能需要在表格中添加，每种车型一个。这允许您对行进行分组，以便“添加修剪”脚本可以针对它所属的任何组

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

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

//标识一些DOM元素
常数
yearInput=document.getElementById（“年”），
nameInput=document.getElementById（“模型”），
saveBtn=document.getElementById（“saveBtn”），
table=document.getElementById（“table”）；
//添加单击侦听器
saveBtn.addEventListener（“单击”，addModel）；
table.addEventListener（“单击”，addTrim）；//点击将气泡式上升到桌面
//定义单击侦听器
函数addModel（）{
//单击“保存”时添加特定于模型的“tbody”元素
如果（！yearInput.value | |！nameInput.value）{return；}//需要两个输入
//创建新标记
常数
modelText=`${yearInput.value}${nameInput.value}`，
tbodyMarkup=`${modelText}添加修剪`；
//清除输入
yearInput.value=“”；
nameInput.value=“”；
//插入tbody标记
表.insertAdjacentHTML（“beforeend”，tbodyMarkup）；
}
函数addTrim（事件）{
//单击“添加修剪”时，在当前“tbody”中添加行
const btn=event.target；//记住单击了哪个元素
如果（！btn.classList.contains（“addTrim”）{return；}//忽略不相关的单击
//查找祖先“tbody”，并创建新标记
常数
tbody=最近的btn（“tbody”），
trimMarkup=`GLI（255）xxxxxx r-LINE（222）xxxxxx s（220）xxxxxx`；
//插入标记并禁用按钮
tbody.insertAdjacentHTML（“beforeed”，trimMarkup）；
btn.setAttribute（“禁用”、“禁用”）；
}
输入{宽度：50px；}
按钮{左边距：15px；}
tbody>tr，td:first child{text align:left；}
th{边框顶部：1px纯灰；}
th+th，td+td{左边框：1px实心灰色；}
年份
名称
拯救


技术交付
2019捷达添加饰件
GLI（255）xxx xxx
R线（222）xxx xxx
S（220）xxx xxx
我们可能需要查看定义此表的HTML（这样我们就可以知道标记需要如何更改才能完成您要做的事情）。现在单击“保存”会发生什么？（是否有一个JavaScript事件监听器可以控制我们可以检查的行为？）。只是需要知道一条好的道路 
<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>