一个表有两条数据,在另外一个表中得到一条数据并展示另外一条数据用el-table实现
时间: 2024-02-21 09:59:33 浏览: 38
假设第一个表的数据为`table1Data`,第二个表的数据为`table2Data`,其中`table2Data`中的一条数据需要查询出`table1Data`中对应的数据并展示。可以使用`el-table`的`scoped-slot`来实现。
首先,在`el-table`的`columns`中添加需要展示的列,例如:
```html
<el-table :data="table2Data">
<el-table-column label="表2数据" prop="data"></el-table-column>
<el-table-column label="表1数据" :scoped-slot="scope">
<template slot-scope="scope">{{ scope.row.table1Id && getTable1Data(scope.row.table1Id) }}</template>
</el-table-column>
</el-table>
```
在上面的代码中,我们在第二列中使用了`scoped-slot`,并且在模板中调用了一个方法`getTable1Data`,这个方法接收一个参数`table1Id`,用于查询对应的`table1Data`数据。`getTable1Data`方法的实现如下:
```js
methods: {
getTable1Data(table1Id) {
const data = this.table1Data.find(item => item.id === table1Id);
return data ? data.data : '';
}
}
```
在`getTable1Data`方法中,我们使用了`Array.prototype.find`方法来查找`table1Data`中对应的数据,并返回其`data`属性。
需要注意的是,在`getTable1Data`方法中,我们使用了`this.table1Data`来获取`table1Data`的数据,这意味着`table1Data`需要在组件的`data`选项中进行定义。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)