vue3
页面写法跟vue2一样
<el-button type="danger" title="删除" @click="onDelete(scope.row.id)"></el-button>
正常的 vue 对应的 ts 文件
setup () {
const { onDelete } = deleteButton(mountedSelect) // 点击删除按钮函数封装文件
// const 后面的 onDelete 是 deleteButton 函数 传递过来的事件
// mountedSelect 是传递过去的初始化函数
// deleteButton 是封装好的ts文件
// 导出事件 return
return {
onDelete
}
}
引入的封装 ts 文件
import { DELETE_ROLE } from '@/apis/interface'
import { ElMessageBox, ElMessage } from 'element-plus'
const deleteButton = (mountedSelect: () => void): any => {
const onDelete = (Id: any) => {
const formData = { // 删除按钮 创建formData 传给后端
roleId: Id // 选择的那条角色id
}
ElMessageBox.confirm('此操作将永久删除该角色, 是否继续?', '提示', { // 点击删除提示信息
confirmButtonText: '确定删除',
cancelButtonText: '取消删除',
type: 'warning'
}).then(() => {
DELETE_ROLE(formData) // 调用接口
ElMessage({
type: 'success',
message: '删除成功!'
})
mountedSelect()
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
return { onDelete } // return 类似于导出的意思
}
export default deleteButton