前端--医院设置信息单个删除功能实现

1、定义页面组件模板，添加删除按钮

</el-table-column>
   <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete"
                @click="removeDataById(scope.row.id)">   <!-- 得到列表中该行的id值 -->
                删除
            </el-button> 
    </template>
</el-table-column>

2、在api文件夹的js文件中调用后端接口

//删除医院设置信息列表
 deleteHsopSet(id){
     return request({
         url: `/admin/hosp/hospitalSet/${id}`,
         method: 'delete'
     })
 }

3、编写调用删除的方法

在src/views/hosp/list.vue中编写调用删除的方法，参考element-ui

//删除医院设置信息的方法
removeDataById(id) {
    // alert(id)
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {//点击确定执行then方法
        hospset.deleteHsopSet(id)
            .then(response=>{
                //调用js中定义的接口
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
                //刷新页面,调用getList方法
                this.getList(1)
            })
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });          
    });
}