el-table使用formatter修改样式

需求：
审批前和审批后字段是由 长度和宽度组成的，比如说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博客