el-table可以实现单击行查询一个列表,双击行查询另一个列表吗
时间: 2024-01-01 13:06:22 浏览: 52
可以实现单击行查询一个列表,双击行查询另一个列表。
实现方式如下:
1. 在el-table中设置 @row-click 和 @row-dblclick 事件监听器。
2. 在 @row-click 事件处理函数中,根据单击的行获取需要查询的数据,然后通过接口请求获取数据并更新另一个列表。
3. 在 @row-dblclick 事件处理函数中,根据双击的行获取需要查询的数据,然后通过接口请求获取数据并更新当前列表。
示例代码如下:
```html
<el-table
:data="tableData"
@row-click="handleRowClick"
@row-dblclick="handleRowDblclick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 },
{ name: '王五', age: 24 },
],
list1: [],
list2: [],
};
},
methods: {
handleRowClick(row) {
// 获取需要查询的数据
const { name } = row;
// 通过接口请求获取数据并更新另一个列表
this.$http.get('/api/list1', { params: { name } }).then(res => {
this.list1 = res.data;
});
},
handleRowDblclick(row) {
// 获取需要查询的数据
const { name } = row;
// 通过接口请求获取数据并更新当前列表
this.$http.get('/api/list2', { params: { name } }).then(res => {
this.list2 = res.data;
});
},
},
};
```
阅读全文