删除页面前端开发

Api方法

/*页面删除*/
export const page_del = id => {
return http.requestDelete(apiUrl+'/cms/page/del/'+id)
}

编写页面

1、在page_list.vue页面添加删除按钮

<el-table-column label="操作" width="80">
<!--slot-scope:插槽,取得当前行数据,命名为page
    拿到行数据,从行中取出pageid-->
      <template slot-scope="page">
        <el-button
        size="small"type="text"
        @click="edit(page.row.pageId)">编辑
        </el-button>
        <el-button
          size="small"type="text"
          @click="del(page.row.pageId)">删除
        </el-button>
      </template>
      </el-table-column>

在原来,修改页面按钮的插槽中直接再加一个按钮

删除事件

 del:function (pageId) {
        //调用接口
          this.$confirm('确认删除吗？', '提示', {}).then(() => {
          cmsApi.page_del(pageId).then(res=>{
          if (res.success) {
            this.$message.success("删除成功")
            //刷新页面
            this.query()
          }else {
            this.$message.success("删除失败")
          }
          });
        })
      }
    },