In the process of project development, we sometimes encounter the operation of dynamically adding, modifying and deleting data in the table. In the table, we also often encounter the data of merged cells and total and cumulative calculation rows. Here we simply record the application of the actual scene!
The final effect diagram is as follows:
Note: The new operator here cannot be added repeatedly, there is a delete operation when adding, and the edited text will be displayed in the table when there is edited data coming in.
1. Add dynamic form
return {
// 表格数据
productivityForm: {
qualityinspectorTable: []
},
// 添加操作人和动态表格里面的输入框数据
qualityinspectorForm: {
qualityinspectorId: '',
weChatproductNumber: '',
shortmeddageproductNumber: '',
telephoneproductNumber: ''
},
productivityFormRules: {
},
// 操作人下拉框
qualityinspectorOptions: [
{
name: '李佳琪', qualityinspectorId: 1 },
{
name: '李向明', qualityinspectorId: 2 },
{
name: '王天成', qualityinspectorId: 3 },
{
name: '陈天', qualityinspectorId: 4 }
],
// 点击编辑下标
editCurrentRowIndex: ''
}
// 添加操作人事件
addqualityinspectorClick () {
if (!this.qualityinspectorForm.qualityinspectorId) {
this.$message.warning('请先选择操作人再进行新增操作！')
} else {
const obj = JSON.parse(JSON.stringify(this.qualityinspectorForm))
if (this.productivityForm.qualityinspectorTable.find(e => e.qualityinspectorId === obj.qualityinspectorId)) {
this.$message.warning('该操作人已存在，请勿重复添加')
} else {
this.productivityForm.qualityinspectorTable.push(obj)
this.qualityinspectorForm.qualityinspectorId = ''
this.qualityinspectorForm.weChatproductNumber = ''
this.qualityinspectorForm.shortmeddageproductNumber = ''
this.qualityinspectorForm.telephoneproductNumber = ''
}
}
},
2. Delete table row data
deleteproducivity (index) {
this.productivityForm.qualityinspectorTable.splice(index, 1)
},
3, Edit operation
// 点击编辑判断是否有重复数据
handleEditproducivity (type, index) {
if (this.editCurrentRowIndex !== '' && !type) {
this.$message.warning('请先确定您当前的修改项')
} else {
if (!type) {
this.editCurrentRowIndex = index
}
}
},
// 编辑提交保存操作（校验非空数据）
handleEditsave (row) {
if (!row.telephoneproductNumber) {
this.$message.warning('电话生产力不能为空！')
return false
} else if (!row.weChatproductNumber) {
this.$message.warning('微信生产力不能为空！')
return false
} else if (!row.shortmeddageproductNumber) {
this.$message.warning('短信生产力不能为空！')
return false
} else {
this.$confirm('是否确认编辑操作吗？', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const options = {
qualityId: row.qualityId,
telephoneproductNumber: row.telephoneproductNumber,
weChatproductNumber: row.weChatproductNumber,
shortmeddageproductNumber: row.shortmeddageproductNumber
}
this.$store.dispatch('tasks/PatientFollowUpSubmit', options).then(res => {
this.$message.success('编辑成功')
this.editCurrentRowIndex = ''
})
}).catch(() => {
this.$message.info('已取消操作')
})
}
},
4. Submit the save operation
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
const optionsdata = {
...this.productivityForm
}
console.log(optionsdata, 'sss')
// this.$store.dispatch('tasks/DoctorInfoSubmit', {
// TaskId: this.$route.query.id,
// ...this.productivityForm
// }).then(res => {
// this.$emit('getDoctorTaskDetails')
// })
} else {
return false
}
})
},
5. Page display content
<template>
<div class="productivity-info-panel">
<el-form class="productbox" :model="productivityForm" :rules="productivityFormRules" ref="productivityForm" label-width="150px" :inline="false">
<el-form-item label="操作人">
<el-select
clearable
filterable
v-model="qualityinspectorForm.qualityinspectorId"
placeholder="请选择操作人">
<el-option
v-for="(item, index) in qualityinspectorOptions"
:key="index"
:label="item.name"
:value="item.qualityinspectorId">
</el-option>
</el-select>
<el-button style="margin-left: 20px;" type="primary" @click="addqualityinspectorClick" icon="el-icon-plus">新增操作人</el-button>
</el-form-item>
<div class="producivity-table">
<el-table
size="mini"
:data="productivityForm.qualityinspectorTable"
id="tables"
:summary-method="getSummaries"
show-summary
style="width: 100%;">
<el-table-column
prop="qualityinspectorId"
align="center"
label="操作人">
<template slot-scope="scope">
<span>{
{
scope.row.qualityinspectorId && (qualityinspectorOptions.find(e => e.qualityinspectorId === scope.row.qualityinspectorId)).name }}</span>
</template>
</el-table-column>
<el-table-column
prop="telephoneproductNumber"
align="center"
label="电话生产力（天）">
<template slot-scope="scope">
<el-input-number placeholder="请输入电话生产力" v-if="editCurrentRowIndex === scope.$index || !scope.row.qualityId"
size="small" :step="1" step-strictly :min="0" v-model="scope.row.telephoneproductNumber"></el-input-number>
<span v-else>{
{
scope.row.telephoneproductNumber }}</span>
</template>
</el-table-column>
<el-table-column
prop="weChatproductNumber"
align="center"
label="微信生产力（周）">
<template slot-scope="scope">
<el-input-number placeholder="请输入微信生产力" v-if="editCurrentRowIndex === scope.$index || !scope.row.qualityId"
size="small" :step="1" step-strictly :min="0" v-model="scope.row.weChatproductNumber"></el-input-number>
<span v-else>{
{
scope.row.weChatproductNumber }}</span>
</template>
</el-table-column>
<el-table-column
prop="shortmeddageproductNumber"
align="center"
label="短信生产力（周）">
<template slot-scope="scope">
<el-input-number placeholder="请输入短信生产力" v-if="editCurrentRowIndex === scope.$index || !scope.row.qualityId"
size="small" :step="1" step-strictly :min="0" v-model="scope.row.shortmeddageproductNumber"></el-input-number>
<span v-else>{
{
scope.row.shortmeddageproductNumber }}</span>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-button
@click="handleEditproducivity(editCurrentRowIndex === scope.$index, scope.$index)"
type="text"
size="small">
<span v-if="editCurrentRowIndex === scope.$index" @click="handleEditsave(scope.row)">保存</span>
<span v-else-if="!!scope.row.qualityId">编辑</span>
</el-button>
<el-button type="text" style="color: red;" v-if="!scope.row.producivityId" @click="deleteproducivity(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="edit-doctor-btn">
<el-button type="primary" @click="submitForm('productivityForm')">提交信息</el-button>
</div>
</el-form>
</div>
</template>
6. Table totals and merged cell operations
1. Add in el-table: id="tables" :summary-method="getSummaries" show-summary is very important! ! ! ! !
<el-table :data="tableData" id="tables" :summary-method="getSummaries" show-summary>
1. Merge unit
watch listens to events
watch: {
//监听tableData
tableData: {
// 立即监听
immediate: true,
handler() {
this.$nextTick(() => {
const tds = document.querySelectorAll('#tables .el-table__footer-wrapper tr>td');
// colSpan合并列 这里打印一下看一下
console.log(tds)
tds[0].colSpan = 3; // 这里是要合并几行
tds[0].style.textAlign = 'center';
tds[1].style.display = 'none'; // 上述合并3行也就对应的隐藏到第3个格子
tds[2].style.display = 'none';
// 这里注意一下 要合并几行就隐藏到第几个格子，我合并3个格子，第0个格子是 合计 字段不用隐藏，后面两个要隐藏因为是合并3个嘛， 我在这踩过坑 哭死
});
}
}
},
2. Total line calculation
The following is the same method of calculating the direct official website
getSummaries(param) {
const {
columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计：';
return;
}else if(index === 1||index === 2){
//只有这里改了一下
// sums[index] = 'N/A';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
} else {
sums[index] = 'N/A';
}
});
return sums;
},