1.将列表进行合计操作

<el-table id="editAbleTrends" :data="tableData" ref="tableData" height="height" style="width: 100%;" :header-cell-style="{background:'rgb(242, 242, 242)'}" center border highlight-current-row  show-summary :summary-method="getSummaries" :key="'p'+pindex"><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-column prop="date1" label="名字" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="date2" label="年龄" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="address" label="分数" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="name1" label="性别" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="name2" label="年级" :show-overflow-tooltip="true">
</el-table>

  tableData:[{date1:1,address:"-"},{date1:1,address:10},{date1:1,address:10},{date1:1,address:10},{date1:1,address:10},{date1:1,address:10},{date1:1,address:10},{date1:1,address:10},{date1:1,address:10},{date1:1,address:10},        ],height:500,//查询到的数据，通过改变这个值 解决elementUI table合计行初始页面不显示问题pindex:0,//保存编辑每条数据的时候，通过改变此值使表格数据更改

 methods: {// 自定义合计规则getSummaries(param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计';return;}console.log('index',index);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 (Number(prev) + Number(curr) ).toFixed(2);} else {return Number(prev).toFixed(2);}}, 0);sums[index] += '';} else {sums[index] = '';}});//此处自定义合计分数更改，通过下面的getTableDataScore()方法if (this.activetabPaneName == "preliminary" ) {sums[3] = this.finalScore;} else {sums[3] = this.finalScore;}return sums;},},

2.进行合计行-------单元格合并

 // 监控data中的数据变化watch: {tableDataList:{immediate:true,async handler(){//await this.$nextTick(); 根据实际选择延迟调用await this.$nextTick();const tables = document.querySelectorAll('#editAbleTrends .el-table__footer-wrapper tr>td');console.log('tables',tables);tables[0].colSpan=3;tables[0].style.textAlign='center'tables[1].style.display='none'tables[2].style.display='none'tables[3].colSpan=3;tables[3].style.textAlign='center'tables[4].style.display='none'tables[5].style.display='none'}}},

也可以写在方法里面

 async tableDataList() {await this.$nextTick();const tables = document.querySelectorAll("#editAbleTrends .el-table__footer-wrapper tr>td");console.log("tables", tables);tables[0].colSpan = 3;tables[0].style.textAlign = "center";tables[1].style.display = "none";tables[2].style.display = "none";tables[3].colSpan = 3;tables[3].style.textAlign = "center";tables[4].style.display = "none";tables[5].style.display = "none";},

3.获取平均数

    // 获取最后的平均分数getTableDataScore() {// 将列表里面的分数字段重新放在一个数组里面// const values = this.tableDataChange.map((item) =>Number(item.score));//  过滤掉NAN和0，重新赋值到另一个数组let value = values.filter((item) => !isNaN(item) && item);if (value.length > 0) {// 将数组里面的值全部相加，获得let data = value.reduce((prev, curr) => {return (Number(prev) + Number(curr)).toFixed(2);});this.finalScore = (data / value.length).toFixed(2);} else {this.finalScore = 0;}this.tableDataList();},

4.如果想要对分数进行编辑

// res.data代表接口返回的列表
this.tableData= res.data;this.tableData.forEach((item) => {item.state = "0";
});
//
let newV = { ...this.tableData};
let para2 = JSON.parse(JSON.stringify({ newV }));
var arr2 = Object.keys(para2.newV).map(function (i) {return para2.newV[i];
});
//para2就是一个全新的数组和this.tableData的数据一致//  解决elementUI table合计行初始页面不显示问题
this.height = 501;

<el-table-column v-else prop="score" label="分数" :show-overflow-tooltip="true"><template slot-scope="scope"><el-input v-if="status=='scope.row.state == '1'" v-model="scope.row.score"></el-input><span v-else >{{scope.row.score}}</span></template></el-table-column>

<el-table-column label="操作" align="center" ><template slot-scope="scope"><el-button size="mini" type="text" v-if="scope.row.state == '1'" @click="handleReportingSave(scope.$index, scope.row)" icon="el-icon-check">保存</el-button><el-button size="mini" type="text" v-if="scope.row.state != '1'" @click="handleReportingEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button></template>
</el-table-column>

// 项目上报对话框编辑handleReportingEdit(index) {this.pindex++;this.tableData[index].state = "1"; //点击之后显示保存按钮},

//项目上报对话框保存
handleReportingSave(index) {// let reg = /^\+?[1-9][0-9]*$/;let reg = /(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^100$)/;let b =this.tableDataChange[index].score == "-"? true: reg.test(this.tableDataChange[index].score);if (b == false) {this.$message({type: "error",message: "请输入一百以内的数字，可保留两位小数",});} else {this.tableDataChange[index].state = "0"; //点击之后显示编辑按钮console.log("dfksnzbvf", this.tableDataChange[index].state);}this.getTableDataScore();//分数改变，调次方法this.tableDataList();//这个是合并单元格的方法this.pindex++;//将表格刷新
},

// 保存
determinePreservation() {var num = this.tableDataChange.findIndex((n) => n.state == "1");if (num == -1) {// 这里添加保存接口console.log("啦啦我已经进行保存钱钱钱了");saveScore(this.tableData).then((res) => {this.$message.success("保存成功");}).catch((err) => {});// 保存完对话框消失} else {this.$message({type: "error",message: "请将每条数据进行保存",});

列表table，将合计行进行单元格合并，element-ui相关推荐

Easypoi 导出excel 使用注解实现一二级标题行的单元格合并
Easypoi 导出excel 使用注解实现一二级标题行的单元格合并先看一下最终效果图上代码 Excel 模板实体类 @Data public class HxAdvisoryZJEndExcel ...
基于layui中table组件的数据表格单元格合并
layui.use(['table'], function () {var $ = layui.$, table = layui.table;var mergeColumns=['province', ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
1.将show-summary设置为true就会在表格尾部展示合计行. <el-table:data="tableData"id="tableData"s ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
html5 单元格宽度,html table呈现个人简历以及单元格宽度失效的问题解决
正确的实现代码如下: 个人简历个人简历个人资料姓名婚姻照片出生政治面貌性别民族学位移动电话专业电子邮件地址:教育背景2012.9 - 2014.9中国海洋大学本科特长及兴趣爱好篮球.足球 ...
基于element-ui的table实现树级表格操作及单元格合并
功能目录一. 结构调整二. 父子层级展开合并三. 单元格合并 *四. 表格增删改操作如题,公司业务需求,数据结构比较复杂,需要在一张表内实现多级树状数据展示及同属性的单元格合并,并在表格内实现 ...
rowspan table布局_css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...
关于JAVA POI解析WPS docx文档中的table（复杂表格包含单元格横向，纵向的合并）
关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并) 首先,关于poi解析表格先阅读一篇他人的博客使用poi读取word2007(.docx)中的复杂表格 ...

列表table，将合计行进行单元格合并，element-ui

列表table，将合计行进行单元格合并

1.将列表进行合计操作

2.进行合计行-------单元格合并

3.获取平均数

4.如果想要对分数进行编辑

列表table，将合计行进行单元格合并，element-ui相关推荐

最新文章

热门文章