首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js element表格数据刷新,页面重叠,router name重复

vue.js element表格数据刷新,页面重叠,router name重复

作者头像
hotqin888
发布2019-04-09 15:30:27
4.4K0
发布2019-04-09 15:30:27
举报
文章被收录于专栏:hotqin888的专栏hotqin888的专栏

版权声明:本文为博主原创文章,未经博主允许不得转载。

在开始用vue.js element过程中,从网上抄的代码,遇到不少坑,记录一下。

1.在router里的index.js,用了

import App from '@/App'

path: '/',
name: 'App',

导致页面重叠,因为我在App.vue里放了侧栏和面包屑。

实际上看其他例子,App.vue里只有简单几行代码

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
/* eslint-disable */
  export default {
    name: 'App',

侧栏和顶部导航应该放home.vue中,然后在路由里都将home.vue作为根路由名,一个根路由下children里也是根路由则作为默认根路由,此时根路由不能有name属性。

  routes: [
    {
      path: '/login',
      name: '登录',
      component: login
    },
    {
      path: '/',
      redirect: {
        name: 'home'
      },
      // name: 'readme',//默认子路由不能有name属性,name: 'App',
      component: home,
      children: [
        { path: '/', component: readme, name: 'README' },
      ]
    },
    {
      path: '/',
      name: 'doctype-state-action',
      component: home,
      children: [      
        { path: '/doctype', component: doctype, name: 'DOCTYPE' },
        { path: '/docstate', component: docstate, name: 'DOCSTATE' },
        { path: '/docaction', component: docaction, name: 'DOCACTION' },
      ]
    },

router中根路由的name不能和子路由中的name重复 。

2.侧栏导航最下面展开后再缩回,但显示还在

因为少了<span标签

        <el-aside style="width: auto;" class="sidebar-container">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 10px;margin-top: 10px;" size="mini">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
            <el-menu default-active="doctype" @select="handleSelect" :collapse="isCollapse">
            <el-submenu index="doctype">
              <template slot="title">
                <i class="el-icon-ali-set"></i>
                <span slot="title">Doctype-state-action</span>
              </template>

3.用vue-element-extends组件作为editable表格在线编辑,有重新从服务端取到数据后,表格不刷新,原来少了.sync

<el-editable ref="editable"
      :data.sync="transitiondata.transitions" border style="width: 100%" stripe>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年03月23日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档