后台文章需要编辑功能,本人没有做过,所以就请教了这个小哥哥‘I LEFT YOU LAST’,他给了思路
- 通过‘跳转页面获取本条数据的id’,并携带这个id跳转到目标页面
- 目标页面接收这个id,然后通过查询这个id的数据接口获取这个id的数据
代码
路由配置
{ path: '/edit-page/:id',component: EditPage ,props:true },
跳转页面:
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.article_id)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDel(scope.row.article_id)">删除</el-button>
</template>
</el-table-column>
<!-- 这里的id是我数据接口,文章的id -->
methods
handleEdit(article_id){
this.$router.push(`/edit-page/${article_id}`)
},
// 这里的id是文章的id
目标页面
props:{
id:{}
},
data() {
return {
iddata:{},
form:{},
options: [],
upload_name: 'file',
file:[],
}
},
methods
selId(){
//获取传递过来的id
let id = this.id
//根据id来查询数据
articId(id).then(res =>{ // 这里是接口
this.form = res.msg[0] // 因为查询到的数据不是一个对象,而是数组所以这样写了
console.log(this.form)
})
},
created
created() {
this.selId()
},
效果