HTML部分代码
<template> <div> <el-container> <el-header>Header</el-header> <el-main> <div> // 表格数据在这里： :data="tableData" <el-table border :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange" > <el-table-column label="项目名称"> <template scope="scope"> <span>{{ scope.row.item }}</span> </template> </el-table-column>// 动态循环表头数据 <el-table-column :label="item.val" v-for="(item,index) in tableHead" :key="index" > <template scope="scope"> <el-input size="small" v-model="scope.row[item.item]" placeholder="0" type="number" @change="handleEdit(scope.$index, scope.row,item.item)" ></el-input> <span>{{ scope.row[item.item] }}</span> </template> </el-table-column>
<el-table-column label="总分" prop="total"> </el-table-column> </el-table> </div> </el-main> <el-footer> <el-button type="primary">提交</el-button></el-footer> </el-container> </div> </template>
script部分代码
<script> export default { data() { return { // 表头数据 tableHead: [ { val: "指标1", item: "target1" }, { val: "指标2", item: "target2" }, { val: "指标3", item: "target3" }, { val: "指标4", item: "target4" }, { val: "指标5", item: "target5" }, ], // 表格数据 tableData: [ { item: "项目1", target1: 0, target2: 0, target3: 0, target4: 0, target5: 0, total: 0, }, { item: "项目2", target1: 0, target2: 0, target3: 0, target4: 0, target5: 0, total: 0, }, { item: "项目3", target1: 0, target2: 0, target3: 0, target4: 0, target5: 0, total: 0, }, { item: "项目4", target1: 0, target2: 0, target3: 0, target4: 0, target5: 0, total: 0, }, { item: "项目5", target1: 0, target2: 0, target3: 0, target4: 0, target5: 0, total: 0, }, ], }; }, methods: { // 合计 handleEdit(index, row) { var sum = 0; this.tableHead.forEach((element) => { sum += Number(this.tableData[index][element.item]); }); row.total = sum; }, }, }; </script>CSS部分代码（这里是实现可编辑的关键样式一定不能少）
<style lang="less"> * { margin: 0; padding: 0; } body { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; overflow: auto; font-weight: 400; -webkit-font-smoothing: antialiased; } .tb-edit .el-input { display: none; } .tb-edit .current-row .el-input { display: block; } .tb-edit .current-row .el-input + span { display: none; } .el-table td, .el-table th { text-align: center !important; } </style>效果图
这里实现的是点击可编辑，且在点击下一处任何地方，结尾自动合计总分，这里的数据是临时写的假数据（表头的项目名称和合计是写死的，因为它们对应的表格数据是不可编辑的，所以就写死了，循环的表头下面的数据都是可编辑的），后期大家可以把假数据注销，拿到后台接口，通过发送axios请求到后台数据，在渲染到前端页面即可。
标签：vue,表头,item,target5,target4,合计,target3,row From： https://www.cnblogs.com/ayuaichiyu/p/17523027.html