项目开发过程中，我们有时候会遇到表格里面数据进行动态添加修改删除的操作，表格里面我们也会经常遇到合并单元格和合计累加计算行的数据。这里我们就简单的记录一下实际场景的运用！
最终实现的效果图如下：
注意：这里的新增操作人不能重复添加，新增的时候有删除操作，有编辑的数据进来的时候表格里面才会显示编辑文字。
1，添加动态表格
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，删除表格行数据
deleteproducivity (index) {
this.productivityForm.qualityinspectorTable.splice(index, 1)
},
3, 编辑操作
// 点击编辑判断是否有重复数据
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，提交保存操作
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，页面显示内容
<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，表格合计和合并单元格操作
1，el-table里面添加： id=“tables” :summary-method=“getSummaries” show-summary 很重要！！！！！
<el-table :data="tableData" id="tables" :summary-method="getSummaries" show-summary>
1，合并单元
watch监听事件文章来源：https://www.toymoban.com/news/detail-511099.html
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，合计行计算
下面是计算直接官网的方法一样的文章来源地址https://www.toymoban.com/news/detail-511099.html
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;
},
到了这里，关于element-ui添加动态表格并合计行合并行操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
