項目開發(fā)過程中，我們有時候會遇到表格里面數(shù)據(jù)進行動態(tài)添加修改刪除的操作，表格里面我們也會經(jīng)常遇到合并單元格和合計累加計算行的數(shù)據(jù)。這里我們就簡單的記錄一下實際場景的運用！
最終實現(xiàn)的效果圖如下：
注意：這里的新增操作人不能重復(fù)添加，新增的時候有刪除操作，有編輯的數(shù)據(jù)進來的時候表格里面才會顯示編輯文字。
1，添加動態(tài)表格
return {
// 表格數(shù)據(jù)
productivityForm: {
qualityinspectorTable: []
},
// 添加操作人和動態(tài)表格里面的輸入框數(shù)據(jù)
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('該操作人已存在，請勿重復(fù)添加')
} else {
this.productivityForm.qualityinspectorTable.push(obj)
this.qualityinspectorForm.qualityinspectorId = ''
this.qualityinspectorForm.weChatproductNumber = ''
this.qualityinspectorForm.shortmeddageproductNumber = ''
this.qualityinspectorForm.telephoneproductNumber = ''
}
}
},
2，刪除表格行數(shù)據(jù)
deleteproducivity (index) {
this.productivityForm.qualityinspectorTable.splice(index, 1)
},
3, 編輯操作
// 點擊編輯判斷是否有重復(fù)數(shù)據(jù)
handleEditproducivity (type, index) {
if (this.editCurrentRowIndex !== '' && !type) {
this.$message.warning('請先確定您當前的修改項')
} else {
if (!type) {
this.editCurrentRowIndex = index
}
}
},
// 編輯提交保存操作（校驗非空數(shù)據(jù)）
handleEditsave (row) {
if (!row.telephoneproductNumber) {
this.$message.warning('電話生產(chǎn)力不能為空！')
return false
} else if (!row.weChatproductNumber) {
this.$message.warning('微信生產(chǎn)力不能為空！')
return false
} else if (!row.shortmeddageproductNumber) {
this.$message.warning('短信生產(chǎn)力不能為空！')
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，頁面顯示內(nèi)容
<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="電話生產(chǎn)力（天）">
<template slot-scope="scope">
<el-input-number placeholder="請輸入電話生產(chǎn)力" 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="微信生產(chǎn)力（周）">
<template slot-scope="scope">
<el-input-number placeholder="請輸入微信生產(chǎn)力" 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="短信生產(chǎn)力（周）">
<template slot-scope="scope">
<el-input-number placeholder="請輸入短信生產(chǎn)力" 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 很重要！?。。。?/p>
<el-table :data="tableData" id="tables" :summary-method="getSummaries" show-summary>
1，合并單元
watch監(jiān)聽事件文章來源：http://www.zghlxwxcb.cn/news/detail-511099.html
watch: {
//監(jiān)聽tableData
tableData: {
// 立即監(jiān)聽
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行也就對應(yīng)的隱藏到第3個格子
tds[2].style.display = 'none';
// 這里注意一下 要合并幾行就隱藏到第幾個格子，我合并3個格子，第0個格子是 合計 字段不用隱藏，后面兩個要隱藏因為是合并3個嘛， 我在這踩過坑 哭死
});
}
}
},
2，合計行計算
下面是計算直接官網(wǎng)的方法一樣的文章來源地址http://www.zghlxwxcb.cn/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;
},
到了這里，關(guān)于element-ui添加動態(tài)表格并合計行合并行操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
