vue单击table单元格弹出一个窗体
时间: 2023-05-20 10:04:43 浏览: 96
vue+elementui实现点击table中的单元格触发事件--弹框
5星 · 资源好评率100%
可以使用 Vue 的 v-on 指令来监听单元格的点击事件,然后在事件处理函数中弹出一个窗体。具体实现可以参考以下代码:
<template>
<table>
<tr v-for="item in items" :key="item.id" @click="showPopup(item)">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
<div v-if="popupVisible">
<!-- 弹出窗体的内容 -->
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 },
],
popupVisible: false,
};
},
methods: {
showPopup(item) {
// 显示弹出窗体,并传入当前点击的数据项
this.popupVisible = true;
// 可以在这里根据 item 的数据来设置弹出窗体的内容
},
},
};
</script>
阅读全文