el-table-column 里面从其他数据库拿一条数据放到现在这个页面怎么操作
时间: 2024-01-14 10:01:57 浏览: 89
您可以使用 Element UI 的自定义模板(slot)功能,在 el-table-column 中定义一个 slot,然后在该 slot 中编写自己的代码逻辑来实现从其他数据库中获取数据并显示在 el-table 中的功能。
具体步骤如下:
1. 在 el-table-column 中定义一个 slot,例如:
```html
<el-table-column label="姓名">
<template slot-scope="scope">
<!-- 这里定义自己的代码逻辑 -->
</template>
</el-table-column>
```
2. 在 slot 中编写自己的代码逻辑,例如使用 axios 发送异步请求从其他数据库中获取数据:
```html
<el-table-column label="姓名">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
<span v-if="!scope.row.age">Loading...</span>
<span v-else>{{ scope.row.age }}</span>
</template>
</el-table-column>
```
```javascript
<script>
export default {
data() {
return {
data: []
}
},
methods: {
fetchData() {
axios.get('/api/user/1').then(res => {
this.data = res.data
})
}
},
mounted() {
this.fetchData()
}
}
</script>
```
以上示例代码中,使用 axios 发送异步请求从 /api/user/1 接口获取数据,然后将数据保存在组件的 data 中。在 el-table-column 的 slot 中,使用 scope.row.name 显示 el-table 中的数据,如果 scope.row.age 不存在,则显示 Loading...,否则显示 scope.row.age。
注意:以上示例代码仅供参考,具体实现方式需要根据您的实际业务需求进行调整。
阅读全文