如何在 table 中对部分进行分组？
How can I group sections within a table?
我正在使用 Vue 和 Element UI 创建一个 table。目前我正在尝试找出一种可能的方法来将 year/name 添加到弹出窗口并点击保存以使其显示为 headers 中所示的其中一个旁边有 'add trim' 的 ss？添加 trim 按钮会将这些行添加到 table 但仅适用于该模型 year/name 组。
总而言之，我正在寻找一种方法将某些行关联到表示模型 name/year 的 headers。
<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>
您可能想要将 multiple tbody elements 添加到您的 table，每个车型对应一个。这使您可以对行进行分组，以便您的“添加 Trim”脚本可以定位它所属的任何组。
这个例子很草率，使用了 .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>
我正在使用 Vue 和 Element UI 创建一个 table。目前我正在尝试找出一种可能的方法来将 year/name 添加到弹出窗口并点击保存以使其显示为 headers 中所示的其中一个旁边有 'add trim' 的 ss？添加 trim 按钮会将这些行添加到 table 但仅适用于该模型 year/name 组。
总而言之，我正在寻找一种方法将某些行关联到表示模型 name/year 的 headers。
<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>
您可能想要将 multiple tbody elements 添加到您的 table，每个车型对应一个。这使您可以对行进行分组，以便您的“添加 Trim”脚本可以定位它所属的任何组。
这个例子很草率，使用了 .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>