取消/删除

用的软件是Webstrom，框架是Vue，组件是ElementUI。

 

注意代码不能直接复制粘贴之后运行，因为接口没有放上来。

 

html

 

<template slot-scope="scope">
    <el-button type="text" @click="toEdit(scope.row.id)">编辑</el-button>
    <el-button type="text" @click="handleCanceled(scope)">取消</el-button>
</template>

 

javascript

 

// $index没有用到，可以删掉
// row传的值是整个表单接收到的数据
handleCanceled({ $index, row }) {
    // 用的是element的弹框组件(MessageBox)
    this.$confirm('确认取消该会议吗?', '取消会议', {
        confirmButtonText: '确认',
        cancelButtonText: '再想想',
        type: 'warning'
    })
        // 异步调用接口
        .then(async() => {
            // 调删除接口，将行的id传给后端，返回值用res接收
            const res = await cancelMeeting({ id: row.id })
            const { code } = res
            if (code === 0) {
                // 返回的状态码为0，则表示取消操作成功，在页面上方弹出message
                // 用的是element的消息提示组件(Message)
                this.$message({
                type: 'success',
                message: '取消成功'
                })
                // 再调用接口，刷新Table
                await this.getList()
            } else {
                // 返回的状态码不是零，则表示取消失败
                this.$message({
                type: 'error',
                message: '取消失败'
                })
            }
        })
        // catch这个错误，输出
        .catch(err => { console.error(err) })
    },