element的el-table中的el-table-column来一个点击详情查看内容的弹框
时间: 2023-10-27 09:13:05 浏览: 85
vue+elementui实现点击table中的单元格触发事件--弹框
5星 · 资源好评率100%
您可以通过在el-table-column中的slot来添加一个自定义的模板,然后在模板中添加一个按钮或链接,绑定一个点击事件。在该事件中,您可以打开一个弹窗,显示您想要显示的详细内容。以下是一个示例代码段:
```html
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">
<div>{{ scope.row.name }}</div>
<el-button @click="showDetail(scope.row)">详细信息</el-button>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
<el-dialog :visible="showDialog">
<!-- 弹窗中的详细信息 -->
</el-dialog>
```
```vue
export default {
data() {
return {
tableData: [ /* 表格数据 */ ],
showDialog: false,
currentRow: null
}
},
methods: {
showDetail(row) {
// 打开弹窗并展示详细信息
this.currentRow = row
this.showDialog = true
}
}
}
```
阅读全文