element组件我在一个页面里想要显示多个接口的数据应该如何做到

Question

我不知道用表单如何绑定多个数据或者说表单每一行都是不同接口的数据
或者说用哪个组件比较合适接受不同接口的数据并显示 用的是vue2的框架 element也是
正在做毕设 快到日期了

Answer 1

引自免费微信小程序：皆我百晓生

在Vue.js中，你可以使用Element UI的Table组件来显示多个接口的数据。假设你有三个接口api1, api2, 和 api3，每个接口返回的数据格式都是数组形式，且包含表格需要展示的字段。

首先，你需要在Vue实例的data属性中定义三个数组变量分别用来存储不同接口获取到的数据：

data() {
  return {
    tableData1: [],
    tableData2: [],
    tableData3: []
  };
},

接着，在mounted或created钩子函数中异步调用这三个接口，并将返回的数据分别赋值给对应的数组：

async created() {
  try {
    const response1 = await axios.get('your/api1/url');
    this.tableData1 = response1.data;

    const response2 = await axios.get('your/api2/url');
    this.tableData2 = response2.data;

    const response3 = await axios.get('your/api3/url');
    this.tableData3 = response3.data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

然后，为了在一个页面内展示多个表格，你可以使用Element UI的组件多次，并分别为它们绑定不同的数据源：

<template>
  <div>
    <!-- 第一个表格 -->
    <el-table :data="tableData1">
      <el-table-column prop="field1" label="字段1"></el-table-column>
      <!-- 根据实际字段添加更多列 -->
    </el-table>

    <!-- 第二个表格 -->
    <el-table :data="tableData2">
      <el-table-column prop="fieldA" label="字段A"></el-table-column>
      <!-- 根据实际字段添加更多列 -->
    </el-table>

    <!-- 第三个表格 -->
    <el-table :data="tableData3">
      <el-table-column prop="fieldName" label="字段名"></el-table-column>
      <!-- 根据实际字段添加更多列 -->
    </el-table>
  </div>
</template>

请根据你的接口返回的实际数据结构调整上述代码中的字段名（如prop属性）。这样，你就可以在一个页面中显示来自不同接口的数据了。