前端页面的回显

最新推荐文章于 2024-08-16 17:52:56 发布

伍华锋

最新推荐文章于 2024-08-16 17:52:56 发布

阅读量1.3w

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42030357/article/details/98475456

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
        }
      });