功能图:
![](https://i-blog.csdnimg.cn/blog_migrate/6ae08b0ef12cb9b3ab72f4d732443a7a.png)
代码:
<template>
<div class="app-container">
<el-table
:data="tableData"
:summary-method="getSummaries"
show-summary
style="width: 100%"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
>
<el-table-column prop="data" align="center" label="日期">
<template slot-scope="scope">
<div v-if="scope.row.id == 6666" class="txt">请添加</div>
<div v-else class="txt">{{ scope.row.data }}</div>
</template>
</el-table-column>
<el-table-column prop="t1" align="center" label="USDCHF">
<template slot-scope="scope">
<el-input
v-if="scope.row.isEdit"
class="item"
v-model="scope.row.t1"
placeholder="请输入内容"
></el-input>
<div v-else class="txt">{{ scope.row.t1 }}</div>
</template>
</el-table-column>
<el-table-column prop="t2" align="center" label="USDSGD">
<template slot-scope="scope">
<el-input
v-if="scope.row.isEdit == 1"
class="item"
v-model="scope.row.t2"
placeholder="请输入内容"
></el-input>
<div v-else class="txt">{{ scope.row.t2 }}</div>
</template>
</el-table-column>
<el-table-column prop="t3" align="center" label="EURSGD">
<template slot-scope="scope">
<el-input
v-if="scope.row.isEdit == 1"
class="item"
v-model="scope.row.t3"
placeholder="请输入内容"
></el-input>
<div v-else class="txt">{{ scope.row.t3 }}</div>
</template>
</el-table-column>
<el-table-column prop="t4" align="center" label="CHFJPY">
<template slot-scope="scope">
<el-input
v-if="scope.row.isEdit == 1"
class="item"
v-model="scope.row.t4"
placeholder="请输入内容"
></el-input>
<div v-else class="txt">{{ scope.row.t4 }}</div>
</template>
</el-table-column>
<el-table-column prop="t5" align="center" label="EURCHF">
<template slot-scope="scope">
<el-input
v-if="scope.row.isEdit == 1"
class="item"
v-model="scope.row.t5"
placeholder="请输入内容"
></el-input>
<div v-else class="txt">{{ scope.row.t5 }}</div>
</template>
</el-table-column>
<el-table-column prop="t6" align="center" label="EURGBP">
<template slot-scope="scope">
<el-input
v-if="scope.row.isEdit == 1"
class="item"
v-model="scope.row.t6"
placeholder="请输入内容"
></el-input>
<div v-else class="txt">{{ scope.row.t6 }}</div>
</template>
</el-table-column>
</el-table>
<div style="margin-top:20px">
<el-button type="success" @click="insertData">点击添加</el-button>
</div>
</div>
</template>
<script>
import teacherApi from "@/api/teacher";
export default {
name: "Batch",
data() {
return {
// 表格数据
tableData: [],
//添加的数据
test: {},
};
},
created() {
this.fectData();
this.handleCellLeave;
},
methods: {
fectData() {
teacherApi.test().then((res) => {
this.tableData = res.data.item;
});
},
insertData(){
teacherApi.insert(this.test).then(res=>{
if(res.code==20000){
this.$message.success("填充成功")
}
else{
this.$message.error("填充失败")
}
this.fectData();
})
},
/** 鼠标移入cell */
handleCellEnter(row, column, cell, event) {
row.isEdit = 1;
},
/** 鼠标移出cell */
handleCellLeave(row, column, cell, event) {
this.test.t1 = row.t1;
this.test.t2 = row.t2;
this.test.t3 = row.t3;
this.test.t4 = row.t4;
this.test.t5 = row.t5;
this.test.t6 = row.t6;
row.isEdit = 0;
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "总计";
} else if (
index === 5 ||
index === 6 ||
index === 4 ||
index === 3 ||
index === 2 ||
index === 1
) {
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);
} else {
sums[index] = "N/A";
}
} else {
sums[index] = "--";
}
});
return sums;
},
},
};
</script>
<style lang='scss'>
.item {
width: 100px;
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__inner {
height: 24px !important;
}
}
.txt {
line-height: 24px;
padding: 0 9px;
box-sizing: border-box;
}
</style>