例子:el-table如何让两个不相干的请求数据放在一个table中

举个例子:我进行了两个请求,如何吧连个请求放在一个table中

 <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="SF"
        label="SF"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名">
      </el-table-column>

    </el-table>
//这个查询来的是 SF

  this.$axios.post('http://localhost:8899/api/chaXun1', {
        tableName: this.shuJu
      }, {headers: {'Content-Type': "application/json"}}).then(res => {
        this.tableData = res.data
      }).catch(err => {
        console.log('操作失败' + err)
      })


//这个查出来的是username
  this.$axios.post('http://localhost:8899/api/chaXun2', {
        tableName: this.shuJu
      }, {headers: {'Content-Type': "application/json"}}).then(resp => {
        this.tableData = resp.data
      }).catch(err => {
        console.log('操作失败' + err)
      })

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7397386
  • 这篇博客你也可以参考下:如何基于el-table封装一个方便好用的table组件
  • 以下回答来自chatgpt:

    首先,需要明确问题的要求和目标,即将两个不相关的数据请求合并显示在同一个el-table中。根据参考资料和问题描述,可以采用以下步骤解决问题:

    1. 获取两个不相关的数据请求,并将它们的数据分别存储在不同的变量中。

    2. 使用浅拷贝或深拷贝将其中一个数据请求的数据复制到另一个变量中。

    javascript // 假设data1和data2分别为两个不相关的数据请求的结果 let mergedData = Object.assign({}, data1); // 使用浅拷贝 // 或者 let mergedData = JSON.parse(JSON.stringify(data1)); // 使用深拷贝

    1. 将另一个数据请求的数据合并到mergedData中。

    javascript // 假设data2为另一个数据请求的结果 mergedData = mergedData.concat(data2); // 假设数据是数组

    1. 渲染el-table并将合并后的数据传递给table的data属性。

    html <template> <el-table :data="mergedData"> <!-- 表格的列定义 --> </el-table> </template>

    完整代码如下:

    // 获取两个不相关的数据请求并存储在不同的变量中
    let data1 = await fetch('/api/data1');
    let data2 = await fetch('/api/data2');
    
    // 使用浅拷贝或深拷贝将其中一个数据请求的数据复制到另一个变量中
    let mergedData = Object.assign({}, data1); // 使用浅拷贝
    // 或者
    let mergedData = JSON.parse(JSON.stringify(data1)); // 使用深拷贝
    
    // 将另一个数据请求的数据合并到mergedData中
    mergedData = mergedData.concat(data2); // 假设数据是数组
    
    // 渲染el-table并将合并后的数据传递给table的data属性
    new Vue({
      el: '#app',
      data: {
        mergedData: mergedData
      }
    });
    

    需要根据实际情况修改数据请求的URL和数据合并的方式,同时也需要根据实际情况调整el-table的列定义和其他属性设置。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^