el-table表格数据处理,列表将变更前数据放置在前面,变更后数据放在表格后面
注意:这里的表格前后,指的是表格数据的前几行以及后面行
首先数据获取后,对数据进行拆分处理,我这边使用了一个isEdit的参数区分是变更前还是变更后的数据
<el-table
ref="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-column
v-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))
// 合并并更新 tableData
page.tableData = [...beforeRows, ...afterRows]
})
this.allList = newCTble //newCTble数据 是最后获取的拼接好 要展示的数据