<el-table-column property="" label="操作" width="200" show-overflow-tooltip><template #default="scope"><span @click="handleSimilarQuestion(scope.row)">相似问</span><span @click="handleEdit(scope.row)">编辑</span><!-- <span @click="printRow(scope.row)">删除</span> --><!-- 插槽 title记得加: --><el-popconfirm :title="`确认删除: ${questionNum} ?`" width="200" @confirm="confirmEvent"@cancel="cancelEvent" confirm-button-text="确认" cancel-button-text="取消"><template #reference><span @click="printRow(scope.row)">删除</span></template></el-popconfirm></template></el-table-column>
js
// 问答库 删除函数
let questionNum = ref('')function printRow(row: any) {// console.log(row.question); // 打印当前行的数据 questionNum.value = row.question// console.log(questionNum.value)
}
const confirmEvent = () => {console.log('确认删除')
}
const cancelEvent = () => {console.log('取消删除')
}// 相似问
function handleSimilarQuestion(row:any) { console.log(row); } // 编辑
function handleEdit(row:any) { console.log(row); }
#default="scope"
定义了一个名为default
的插槽,并将当前行的数据传递给一个名为scope
的变量。
<template #default="scope">
@click="printRow(scope.row)"
是一个事件监听器,它会在该<span>
元素被点击时调用printRow
函数,并将scope.row
(即当前行的数据)作为参数传递。
<span @click="printRow(scope.row)">删除</span>
- 当该函数被调用时,会使用
console.log
将参数row
的内容打印到浏览器的控制台。
function printRow(row: any) {
console.log(row.question); // 打印当前行的数据
}