vue3写法

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