欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > el-table表格数据处理,列表将变更前数据放置在前面,变更后数据放在表格后面

el-table表格数据处理,列表将变更前数据放置在前面,变更后数据放在表格后面

2024/10/23 13:51:55 来源:https://blog.csdn.net/dy1717/article/details/143066745  浏览:    关键词:el-table表格数据处理,列表将变更前数据放置在前面,变更后数据放在表格后面

注意:这里的表格前后,指的是表格数据的前几行以及后面行

首先数据获取后,对数据进行拆分处理,我这边使用了一个isEdit的参数区分是变更前还是变更后的数据

<el-tableref="table":data="val.tableData"style="width: 100%; margin: 0 auto; font-size: 14px"height="100%"align="center":row-key="(row, index) => index":row-class-name="tableRowClassName":cell-class-name="tableCellClassName":header-cell-style="{ background: '#F5F7FA', height: '30px' }"@cell-click="handleCellClick"@cell-dblclick="tabClick"><el-table-columnv-for="(item, index) in viewColumnsTwo":key="index":fixed="item.fixed":prop="item.prop":align="item.align":label="item.label":min-width="item.width":show-overflow-tooltip="true"class="after_class"/>
</el-table>viewColumnsTwo: [{ prop: 'topSymptom', width: '120', align: 'center', label: '事项', fixed: false },{ prop: 'controlItem', width: '120', align: 'center', label: '管理项', fixed: false },{ prop: 'controlStandard', width: '120', align: 'center', label: '管理基准', fixed: false },{ prop: 'remark', width: '120', align: 'center', label: '备注', fixed: false }],//数据返回的是topSymptomAfter、topSymptomBefore这样的数据,所以展示的时候要把数据拆分出来 再显示
//c数组是一个大包含项,tableData才是我所需要的表格数据,我这边是多个表格,所以循环处理了     c.forEach(page => {page.tableData = page.tableData.map(data => ({...data,// 合并 After 和 Before 数据topSymptom: {before: data.topSymptomBefore,after: data.topSymptomAfter},controlItem: {before: data.controlItemBefore,after: data.controlItemAfter},controlStandard: {before: data.controlStandardBefore,after: data.controlStandardAfter},remark: {before: data.remarkBefore,after: data.remarkAfter}}))})const newCTble = c // 拆分出的before和After数据,按照这个再次去拆分 组合newCTble.forEach(page => {const mapRows = (item, isEdit) => ({...item,topSymptom: isEdit ? item.topSymptom.after : item.topSymptom.before,controlItem: isEdit ? item.controlItem.after : item.controlItem.before,controlStandard: isEdit ? item.controlStandard.after : item.controlStandard.before,remark: isEdit ? item.remark.after : item.remark.before,isEdit})const beforeRows = page.tableData.map(item => mapRows(item, false))const afterRows = page.tableData.map(item => mapRows(item, true))// 合并并更新 tableDatapage.tableData = [...beforeRows, ...afterRows]})this.allList = newCTble //newCTble数据 是最后获取的拼接好 要展示的数据

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com