vue悬停在el-table-column的某一行上,根据这一行的id去查询name
时间: 2024-02-18 18:00:31 浏览: 71
vue实现在表格里,取每行的id的方法
你可以使用`slot-scope`和`render`函数来实现这个功能。
首先,在`el-table-column`中设置`slot-scope`属性为`scope`,表示该列的所有数据都将被传递给`scope`对象。然后,在`render`函数中,你需要使用`scope.row.id`作为参数来调用一个查询方法,该方法将根据`id`返回相应的`name`。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="Name">
<template slot-scope="scope">
{{ getNameById(scope.row.id) }}
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1 },
{ id: 2 },
{ id: 3 }
]
}
},
methods: {
getNameById(id) {
// 在这里调用查询方法,根据 id 返回相应的 name
return 'Name ' + id
}
}
}
</script>
```
在这个示例中,我们使用了一个简单的查询方法`getNameById`,它根据传入的`id`返回对应的`name`。在`el-table-column`的`Name`列中,我们使用了`slot-scope`来获取当前行的所有数据,并调用了`getNameById`方法来获取`name`,最终将其显示在表格中。
阅读全文