评论

收藏

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

开发技术 开发技术 发布于:2021-07-11 09:13 | 阅读数:411 | 评论:0

  在开始用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>
  
关注下面的标签,发现更多相似文章