举个例子:我进行了两个请求,如何吧连个请求放在一个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)
})
不知道你这个问题是否已经解决, 如果还没有解决的话:首先,需要明确问题的要求和目标,即将两个不相关的数据请求合并显示在同一个el-table中。根据参考资料和问题描述,可以采用以下步骤解决问题:
获取两个不相关的数据请求,并将它们的数据分别存储在不同的变量中。
使用浅拷贝或深拷贝将其中一个数据请求的数据复制到另一个变量中。
javascript // 假设data1和data2分别为两个不相关的数据请求的结果 let mergedData = Object.assign({}, data1); // 使用浅拷贝 // 或者 let mergedData = JSON.parse(JSON.stringify(data1)); // 使用深拷贝
javascript // 假设data2为另一个数据请求的结果 mergedData = mergedData.concat(data2); // 假设数据是数组
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的列定义和其他属性设置。