前端页面的回显前端

1.需求：需要点击编辑按钮.跳转到修改页面进行回显。

文章图片

结果如下

文章图片

2参数的传递点击的编辑按钮的时候需要将此行的pageId带入到修改页面。用slot-scope=“page”这个插槽。在下面的page.row.pageId。就可以取出当前行的pageId。

文章图片

在index.js文件中配置路由为：
{path:’/cms/page/edit/:pageId’,name:‘修改页面’,component:page_edit,hidden:true}
在通过下面将pageId传给他。

edit: function (pageId) { this.$router.push({ path: '/cms/page/edit/' + pageId, query: { page: this.params.page, siteId: this.params.siteId } }) },

需要一打开页面就进行回显数据。那么需要在钩子函数中执行查询：
注意：这里是参数是url的形式的话
http://localhost:11000/#/cms/page/edit/5ad92f5468db52404cad0f7c需要
route.params.pageId”取参数。
而参数如果是http://localhost:11000/#/cms/page/edit？5ad92f5468db52404cad0f7c需要$route.query.pageId

created: function () { //页面参数通过路由传入，这里通过this.$route.params来获取 this.pageId=this.$route.params.pageId; //根据主键查询页面信息 cmsApi.page_get(this.pageId).then((res) => { console.log(res); if(res){ this.pageForm = res; } });

【前端页面的回显】然后通过v-model双向绑定来回显数据。