GET_PATIENT_SERVICE_CENTER_BED_ADJUSTMENT_DATA,GET_WARD_BED_SITUATION_DETAIL,表格页面用vue实现
时间: 2023-09-13 21:10:41 浏览: 184
Vue实现表格中对数据进行转换、处理的方法
5星 · 资源好评率100%
好的,那我来给你提供一个简单的实现思路:
1. 使用 Vue 框架创建一个表格组件,组件内部定义表格的列头和数据数组;
2. 在组件的 `created` 生命周期内,分别调用 `GET_PATIENT_SERVICE_CENTER_BED_ADJUSTMENT_DATA` 和 `GET_WARD_BED_SITUATION_DETAIL` 接口获取数据;
3. 在接口返回数据的回调函数中,将数据合并到一个数组中;
4. 将合并后的数据数组赋值给表格组件的 `data` 属性,即可在页面上渲染出表格。
下面是一个简单的示例代码,你可以根据实际情况进行修改:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>床位号</th>
<th>病区</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
<td>{{ item.bedNumber }}</td>
<td>{{ item.wardName }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
const url1 = 'http://api1.com';
const url2 = 'http://api2.com';
const promises = [this.$axios.get(url1), this.$axios.get(url2)];
Promise.all(promises).then((responses) => {
const data = [];
responses.forEach((response) => {
const items = response.data.items;
items.forEach((item) => {
data.push({
id: item.id,
name: item.name,
age: item.age,
gender: item.gender,
bedNumber: item.bedNumber,
wardName: item.wardName,
});
});
});
this.tableData = data;
});
},
},
};
</script>
```
以上示例代码仅供参考,你需要根据实际情况进行修改。
阅读全文