vue后台文章编辑功能

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。 ​

 后台文章需要编辑功能，本人没有做过，所以就请教了这个小哥哥‘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()
		},

效果

​编辑

​