weixin_39607474
2021-01-02 10:46 阅读 9

lin-table在分页情况下配合v-if 渲染分页的展示存在潜在问题。

重现步骤(可选):

image

https://github.com/TaleLin/lin-cms-vue/blob/master/src/view/book/book-list.vue

目前这个管理书的列表是没有分页的,当增加分页功能后。因为上面使用的v-if v-else,在第二页之后编辑书,v-if渲染编辑页面。返回后。数据还是会展示第二页。

但是下面的分页的组件却显示在第一页。

期望的结果是什么? 在lin-table组件中的el-pagination增加参数即可解决。

image

实际的结果是什么? 可能存在v-if 与分页渲染显示的潜在问题。

该提问来源于开源项目:TaleLin/lin-cms-vue

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • weixin_39523887 weixin_39523887 2021-01-02 10:46

    在editClose方法中给分页器赋值可解决

    点赞 评论 复制链接分享
  • weixin_39607474 weixin_39607474 2021-01-02 10:46

    官方的这个项目中的lin-table.vue的el-pagination没有:current-page这个参数设置,我这里加上去就正确了。。

    点赞 评论 复制链接分享
  • weixin_39607474 weixin_39607474 2021-01-02 10:46

    重现步骤(可选):

    嗨!

    image

    
       goto(path) {
          this.$router.push({
            path,
          })
        },
    

    go方法会调用 this.$router.push方法, 重复点击没有子菜单的根菜单时,这个方法会导致如下问题。

    
    vue-router.esm.js?8c4f:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/about") is not allowed", stack: "Error↵    at new NavigationDuplicated (webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26)"}
    

    期望的结果是什么?

    使用router-link处理这一问题。

    
               <!-- 一级else -->
              <router-link :to="item.path" :key="item.name" class v-else>
                <el-menu-item class="subMenuContent" :index="idMap[item.name]" :key="idMap[item.name]">
                  <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
                  <img v-else :src="item.icon" class="imgIcon">
                  <span slot="title">{{ item.title }}</span>
                </el-menu-item>
              </router-link> 
    
    点赞 评论 复制链接分享
  • weixin_39607474 weixin_39607474 2021-01-02 10:46

    重现步骤(可选):

    src/plugin/xx目录/stage-config.js,默认情况下,这个js下只能写一个对象,不支持数组,这样只能生成一个根菜单。

    
    const CustomRouter = {
      route: null,
      name: null,
      title: '自定义组件',
      type: 'folder',
      icon: 'iconfont icon-zidingyi',
      filePath: 'view/custom/',
      order: null,
      inNav: true,
      children: [
        {
          title: 'upload 图像上传',
          type: 'view',
          name: 'ImgsUploadDemo',
          route: '/custom/upload-image',
          filePath: 'plugin/custom/view/upload-image.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        },
        {
          title: 'gallery 画廊',
          type: 'view',
          name: 'GalleryDemo',
          route: '/custom/gallery',
          filePath: 'plugin/custom/view/gallery.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        },
        {
          title: '富文本',
          type: 'view',
          name: 'Tinymce',
          route: '/custom/tinymce',
          filePath: 'plugin/custom/view/tinymce.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        },
        {
          title: 'multiple 多重输入',
          type: 'view',
          name: 'Multiple',
          route: '/custom/multiple',
          filePath: 'plugin/custom/view/multiple-input.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        },
      ],
    }
    export default CustomRouter
    

    期望的结果是什么?

    调整script/template/plugin-stage-config.js这个js,处理plugin/stage-config.js中存在数组的情况,以支持生成多个一级菜单的情况。

    image

    
    let pluginsNewConfig = [];
    pluginsConfig.forEach(stageConfig => {
      if (Array.isArray(stageConfig)) {
        stageConfig.forEach(config => {
          pluginsNewConfig.push(config)
        })
      } else {
        pluginsNewConfig.push(stageConfig)
      }
    })
    export default pluginsNewConfig
    

    即支持这种情况

    
    const CustomRouter =[ {
      route: null,
      name: null,
      title: '自定义组件',
      type: 'folder',
      icon: 'iconfont icon-zidingyi',
      filePath: 'view/custom/',
      order: null,
      inNav: true,
      children: [
        {
          title: 'upload 图像上传',
          type: 'view',
          name: 'ImgsUploadDemo',
          route: '/custom/upload-image',
          filePath: 'plugin/custom/view/upload-image.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        },
        {
          title: 'gallery 画廊',
          type: 'view',
          name: 'GalleryDemo',
          route: '/custom/gallery',
          filePath: 'plugin/custom/view/gallery.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        },
        {
          title: '富文本',
          type: 'view',
          name: 'Tinymce',
          route: '/custom/tinymce',
          filePath: 'plugin/custom/view/tinymce.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        },
      ],
    },{
      route: null,
      name: null,
      title: '自定义组件2',
      type: 'folder',
      icon: 'iconfont icon-zidingyi',
      filePath: 'view/custom/',
      order: null,
      inNav: true,
      children:  {
          title: 'multiple 多重输入',
          type: 'view',
          name: 'Multiple',
          route: '/custom/multiple',
          filePath: 'plugin/custom/view/multiple-input.vue',
          inNav: true,
          icon: 'iconfont icon-zidingyi',
          permission: null,
        }
    }]
    export default CustomRouter
    
    点赞 评论 复制链接分享
  • weixin_39891694 weixin_39891694 2021-01-02 10:46

    感谢反馈。 以后有好的建议可以直接提 PR,另外一个业务型插件我们理解为一个小型APP,与其他业务的交互是通过暴露 API 实现,所以一个插件只有一个根节点。

    点赞 评论 复制链接分享

相关推荐