需求:
审批前和审批后字段是由 长度和宽度组成的,比如说beforeChanging字段值显示为3cm 6cm,对比审批前和审批后的值,如果宽度不相等,审批后的值样式为红色
(后端返回的有对应审批前 长度和宽度的值 例如审批前长度 beforeLength:3cm ,审批前宽度beforeWidth:6cm)
使用el-table的中的formatter函数来格式化来处理数据格式
<el-table>
<el-table-column label="审批">
<el-table-column prop="beforeChanging" label="审批前" />
<el-table-column
prop="afterChanging"
label="审批后"
:formatter="formatAfterChanging"
/>
</el-table-column>
</el-table-column>
</el-table>
const formatAfterChanging = (row)=>{
// 获取表格数据对应这一行的index
const index = state.tableData.indexOf(row)
if(index!==-1){
const beforWidth = state.beforeWidth[index] //对应这一行改前宽度的值,后端返回的接口数据
const afterWidth = state.afterWidth[index] //对应这一行改后宽度的值,后端返回的接口数据
if(beforWidth!==afterWidth){
//使用vue3的h()函数处理
return h('span', { style: 'color: red;' }, row.afterChanging);
}
}
return row.afterChanging;
}
h()函数详情学习路径
vue —— h函数的学习与使用_vue h-CSDN博客