<el-table v-loading="loading" :data="directionList" > <el-table-column label="流出区域id" align="center" prop="outAreaId" /> <el-table-column label="流出区域" align="center" prop="areaName "/> </el-table>将这两个不同数据库vue的值关联起来,第一个值给参数,第二个自动出现对应的参数
时间: 2023-07-03 19:18:56 浏览: 139
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
如果你想关联两个不同的数据库中的值,你需要在后端进行数据的查询和处理,然后将处理后的数据传递给前端 Vue.js 的模板代码。在 Vue.js 中,你可以在组件中通过 `computed` 或者 `watch` 来监听数据的变化并进行相应的处理。
具体来说,你可以将两个不同的数据库中的数据通过一个公共的键值对进行关联,然后在 Vue.js 中使用 `$http` 或者 `axios` 等工具进行异步请求,获取后端处理过的数据,然后将其赋值给 `directionList` 对应的字段。这样,在模板代码中就可以直接使用 `directionList` 的数据来渲染表格。
例如,你可以在 Vue.js 组件的 `created` 生命周期函数中进行异步请求:
```javascript
created() {
this.loading = true
this.$http.get('/api/getDirectionList').then(response => {
this.directionList = response.data
this.loading = false
})
}
```
这里假设 `/api/getDirectionList` 是后端提供的获取处理后数据的接口。
在模板代码中,你可以使用 `v-for` 来循环渲染表格的行和列:
```html
<el-table v-loading="loading" :data="directionList">
<el-table-column label="流出区域id" align="center" prop="outAreaId" />
<el-table-column label="流出区域" align="center" prop="areaName">
<template slot-scope="{ row }">
{{ row.outAreaId }} 对应的值为 {{ row.areaName }}
</template>
</el-table-column>
</el-table>
```
这里使用了 `row` 对象来访问每行数据,然后通过 `row.outAreaId` 和 `row.areaName` 来获取对应的值。
阅读全文