vuePC项目踩坑记录

本文档用于记录vue相关PC端遇到的一些问题记录，方面团队成员共享

一、element-ui踩坑记录：

1、el-carousel

使用el-carousel幻灯片时，动态设置轮播时间interval。需要同步动态绑定autoplay的值。否则会出现轮播卡顿或者延迟的问题。与源码中定时器有关。需要关闭定时器再重新赋值

2、el-table sortable表格排序

只需要用的升降排序，在<el-table-column>中绑定:sort-orders=['ascending', 'descending']。同时必须将sortable值设置为true，不绑定或为custom均无效。

二、项目踩坑记录

1、三级路由

需要设置三级路由，router第二级路由要加上父级路由的名称。删除AppMain.vue文件<router-view>中的:key。

与侧边栏的绑定暂未。。需要分析源码。
三级路由index.js文件示例：

{
        path: '/test',
        component: Layout,
        redirect: '/test/router/test1',
        name: '路由',
        meta: {
            title: '路由测试'
        },
        children: [{
            path: '/test/router',
            redirect: '/test/router/test1',
            component: () => import('@/views/routerTest/index'),
            meta: {
                title: '路由测试',
                noCache: true
            },
            children: [{
                path: 'test1',
                meta: { title: 'test1' },
                component: () => import('@/views/routerTest/page/test1')
            },
            {
                path: 'test2',
                meta: { title: 'test2' },
                component: () => import('@/views/routerTest/page/test2')
            }]
        }]
    },

2、window.addEventListener

使用window.addEventListener('scroll', this.handleScroll)不能监听绑定滚动事件。需要写成这样：window.addEventListener('scroll', this.handleScroll,true)。若得到的值始终为0，则需要使用元素的滚动。document.querySelector('.el-main').scrollTop。有的浏览器不能监听到页面滚动到底部。试一试在判断表达式中+1

3、点击按钮触发刷新页面

在<el-form>中，使用<button>绑定点击事件，有可能会触发表单默认提交事件。使用@click.prevent阻止默认事件