如何从多个控制器获取Vuetable-2中的数据并在详细信息行中显示它们

<template>
  <div>
    <vuetable ref="vuetable" :api-url="apiUrl" :fields="fields">
      <template slot="detail-row" slot-scope="props">
        <div v-for="(data, index) in props.rowData.details" :key="index">
          {{ data }}
        </div>
      </template>
    </vuetable>
  </div>
</template>

<script>
import Vuetable from 'vuetable-2';

export default {
  components: {
    Vuetable,
  },
  data() {
    return {
      apiUrl: 'your_api_url',
      fields: [
        // 定义表格列字段
      ],
      dataSource: [], // 数据源数组
    };
  },
  created() {
    // 发起数据请求
    this.getDataFromControllers();
  },
  methods: {
    getDataFromControllers() {
      // 调用多个控制器的方法，获取数据
      // 假设有两个控制器：ControllerA和ControllerB
      this.getDataFromControllerA();
      this.getDataFromControllerB();
    },
    getDataFromControllerA() {
      // 调用控制器A的方法，获取数据
      // 并将返回的数据存储到数据源数组中
      // 示例代码：
      // YourControllerA.getData()
      //   .then(response => {
      //     this.dataSource = this.dataSource.concat(response.data);
      //   })
      //   .catch(error => {
      //     console.error(error);
      //   });
    },
    getDataFromControllerB() {
      // 调用控制器B的方法，获取数据
      // 并将返回的数据存储到数据源数组中
      // 示例代码：
      // YourControllerB.getData()
      //   .then(response => {
      //     this.dataSource = this.dataSource.concat(response.data);
      //   })
      //   .catch(error => {
      //     console.error(error);
      //   });
    },
  },
};
</script>