vue结合element-ui开发编辑表单时,通过id查数据的时候,后端每次返回的字段不一样,前端代码应该如何处理展示数据?
时间: 2024-04-30 10:22:58 浏览: 84
vue+elementUI 复杂表单的验证、数据提交方案问题
可以考虑使用计算属性或者过滤器来处理展示数据。具体步骤如下:
1. 定义计算属性或者过滤器,用于格式化数据。比如:
```javascript
// 计算属性
computed: {
formattedData: function() {
if (this.data) {
return {
id: this.data.id,
name: this.data.name,
age: this.data.age,
address: this.data.address || this.data.location
}
} else {
return null
}
}
}
// 过滤器
filters: {
formatData: function(data) {
if (data) {
return {
id: data.id,
name: data.name,
age: data.age,
address: data.address || data.location
}
} else {
return null
}
}
}
```
2. 在模板中使用计算属性或者过滤器来展示数据。比如:
```html
<template>
<div>
<p>Id: {{formattedData.id}}</p>
<p>Name: {{formattedData.name}}</p>
<p>Age: {{formattedData.age}}</p>
<p>Address: {{formattedData.address}}</p>
</div>
</template>
<template>
<div>
<p>Id: {{data | formatData.id}}</p>
<p>Name: {{data | formatData.name}}</p>
<p>Age: {{data | formatData.age}}</p>
<p>Address: {{data | formatData.address}}</p>
</div>
</template>
```
这样,无论后端返回的数据字段名如何变化,前端都可以通过计算属性或者过滤器来格式化数据,保证展示的数据是一致和准确的。
阅读全文