find和findIndex方法都是es6针对数组的方法。但是两者是有区别的。
find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。

所以如果没有找到符合条件的的时候
changeNum === undefined
changeNumIndex === -1
此时 changeNum !== undefined && changeNumIndex !== undefined 为false

设置你的数据为data数组,按照数据的特点进行三次循环。
tagType.vue

// 其他代码省略
<el-form-item v-for="(item,index) in data" :label="data.name" :key="index">
    <div v-for="itemChild in item.children" :key="itemChild.id">
        <el-tag>{{itemChild.name}}</el-tag>
        <tag-child :tag-data="itemChild.children"></tag-child>
    </div>
</el-form-item>

tagChild.vue

<template>
    <el-tag type="success" v-for="typeItem in tagData" :key="typeItem.id">{{typeItem.name}}</el-tag>
</template>
<script>
export default {
   props: ['tagData']
   data() {
    return {
        typeItem: {}
    }
   }
}
</script>

这种时候你要学会学习的方法。

1. 首先到 MDN 上查找 align-items 的默认属性是什么：https://developer.mozilla.org...
2. 得知是 normal，在你的场景下等效于 stretch
3. 了解 stretch 的意思是按照容器的宽高缩放，所以滚动是正常
4. 再看 center/flex-start/flex-end 的意思，只规定了起止位置，没有限制尺寸，所以撑开也是正常的
5. 容器默认都是 overflow: visible，所以伸出去也是正常的。

猜测可能的原因是刷新之后，vuex中token被清空了。导致

let baseHref = `${url.export}?token=${token}`;

这句话的地址改变了，所以向服务器又请求了一次。

我大致看了一下你的代码，真正关键的pageList看到你并没有赋值。我猜想你是想把router里面的部分二级菜单赋值给pageList给pageList吧

 {
                path: '/index',
                // component: Index,
                component: () => import('src/views/index'),
                meta: { title: '首页' }
            },
            {
                path: '/user_add',
                name: 'AddUser',
                component: AddUser,
            },
            {
                path: '/task_list',
                name: 'TaskList',
                component: TaskList
            },
            {
                path: '/data_tmp',
                name: 'DataTmp',
                component: DataTmp
            },
            {
                path: '/user_list',
                name: 'UserList',
                component: resolve => require(['src/views/userManage/userList/userList'], resolve),
                meta: { title: '用户列表' }
            },
            {
                path: '/customContainer',
                name: 'CustomContainer',
                component: CustomContainer
            },
            {
                path: '/partDraggable',
                name: 'PartDraggable',
                component: PartDraggable
            },
            {
                path: '/article',
                name: 'Article',
                component: Article
            },
            {
                path: '/tenant_message',
                name: 'TenantMessage',
                component: TenantMessage,
                meta: { title: '租房信息' }
            },
            {
                path: '/gallery',
                name: 'Gallery',
                component: Gallery,
                meta: { title: '精美图库' }
            },
            {
                path: '/studentList',
                name: 'StudentList',
                component: StudentList
            },
            {
                path: '/studentAdd',
                name: 'StudentAdd',
                component: StudentAdd
            },
            {
                path: '/studentGridContainer',
                name: 'StudentGridContainer',
                component: resolve => require(['src/views/student/studentGridContainer'], resolve)
            },
            {
                path: '/studentGridContainer',
                name: 'StudentGridContainer',
                component: resolve => require(['src/views/student/studentGridContainer'], resolve)
            },
            {
                path: '/music',
                name: 'Music',
                component: resolve => require(['src/views/music/music'], resolve),
                meta: { title: '歌曲列表' }
            },
            {
                path: '/tableOperation',
                name: 'TableOperation',
                component: resolve => require(['src/views/student/tableOperation'], resolve)
            },
            {
                path: '/formOperation',
                name: 'FormOperation',
                component: resolve => require(['src/views/student/formOperation'], resolve)
            }

如果是那样的话，你可以把这部分单独定义为一个数组，然后export出来，在首页中import进来。并把它赋值给pageList，这样应该就可以出来tab标签了。

typescript是强类型的,是对弱类型的JavaScript的补充，是JavaScript的超集。布尔类型不能做运算，只有数字类型才可以运算。

typescript可以隐式或者显式转换数据类型。

可以把布尔类型转换成数字类型，就可以进行运算。

mounted或者created都可以。created时dom还没有加载，适合调用一些对dom起作用的方法从后台获取数据。毕竟vue数据即视图嘛。可以把created周期视作js中的load()
其中created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

created() {
  this.$nextTick(() => {
    //dom操作
  })
}

mounted时dom已经加载完毕，适合调用一些对dom起补充作用的方法从后台获取数据。可以把mounted视作jquery中的ready()。

一般来说mounted用的最多，因为大多数都是基于dom树，对视图的的更新和修改。

这个简单啊。
element-ui里面提交按钮有个loading属性,使它的值为变量btnLoading: false。
在用户点击之后，你将btnLoading = true。这时候按钮就不可点击了。loading就一直在那转。
等提交成功了将btnLoading又重置为false。
完美解决！

可以在当前页面禁止退格键响应

js 屏蔽Backspace事件
function document.onkeydown() {
    if (event.keyCode == 8) { 
        if (document.activeElement.type == "text") {
            if (document.activeElement.readOnly == false)
                return true; 
            } 
        return false;
    }
}

vue项目打包后部署到服务器上一般使用nginx作为服务器中间件。
因为是前后端分离的项目，在本地是通过node来代理api的。打包之后失去了node环境，所以需要采用nginx作为服务器中间件来部署和代理api。

安装nginx后，使用nginx的反向代理，将api的地址代理到你的前端网址上。比如
你前端访问使用 192.168.10.50（www.a.com）
api地址为：192.168.10.51:8088

server {
        listen 80;     #1.你想让你的这个项目跑在哪个端口
        server_name 192.168.10.50;     #2.当前服务器ip
        location / {
            root   E:/my_project/dist;     #3.dist文件的位置
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
        }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://192.168.10.51:8088/api; #5.转发地址
            proxy_set_header Host $http_host;
        }
    }

通过代理api之后，你访问http://192.168.10.51:8088/api就相当于访问http://192.168.10.50:80.
这样既不暴露api的实际地方。既安全又稳定。