前端项目踩坑

1. 有tailwindcss样式会和elementUi的样式冲突，具体表现primary的el-button背景蓝色变白
2. el-menu的default-active默认激活的item不会直接渲染，需要重定向路由，如

  {
    path: '/admin',	//想一进入admin就直接渲染article
    name: 'admin',
    component: () => import('@/views/admin.vue'),
    meta: {
      title: 'Admin',
    },
    children: [
      //重定向路由
      {
        path: '/admin', 	//需要在这进行重定向
        component: () => import('@/views/article.vue'),
      },
      {
        path: 'article/:type?',
        name: 'article',
        component: () => import('@/views/article.vue'),
        meta: {
          title: 'Article',
        },
      },
      {
        path: 'personnel',
        name: 'personnel',
        component: () => import('@/views/personnel.vue'),
        meta: {
          title: 'Personnel',
        },
      },
    ],
  },

3. axios返回的状态码非2开头时，要用.catch捕获错误信息
4. axios配置默认的baseURL，直接在App.vue文件中写

import axios from 'axios'
axios.defaults.baseURL = 'http://ip:端口'

5. 引入全局的CSS文件也可以在App.vue的style中

<style>
@import './index.css';
</style>

6. 不想让用户可以返回上一页，可以使用router.replace
7. axios请求加上请求头时请求报错

8. 使用elementUI弹窗获取ref时，首次会失败，第二次成功，原因：el-dialog是懒加载，弹框开启时DOM还没有完全加载完成，不使用nextTick会导致ref元素获取失败

const view = (article: any) => {
  viewArticleVisible.value = true
  nextTick(() => {
    console.log(article.title)
    console.log(viewArticle.value)
    viewArticle.value?.setArticle(article)
  })
}

9. elementUI的table筛选问题：如果直接绑定数据进行筛选的话会有以下问题：
   • 如果选中筛选条件，但是table超过两页的话，切换第二页筛选条件无效
   • 当新增或者删除行后，重新获取table数据时，筛选条件会失效

解决方法：使用tableData变量保存真实的table数据，而使用showTableData来保存展示的数据，filterTag保存筛选条件，绑定el-table的filter-change方法为handlerFilterChange，其参数是选中的筛选条件

const handlerFilterChange = (filter: any) => {
  console.log(filter)
  filterTags.value = filter['articleType']	//选中的文章类型
  getNewShowTableData()
}
const getNewShowTableData = () => {
  if (filterTags.value.length === 0) {	//如果筛选条件是空的话，选择所以的数据进行展示
    showTableData.value = tableData.value
  } else {
    showTableData.value = tableData.value.filter((item: any) => {
      for (let i = 0; i < filterTags.value.length; i++) {
        if (item.type === filterTags.value[i]) return true
      }
      return false
    })
  }
}

<el-table-column
        prop="type"
        label="文章类型"
        column-key="articleType"	//改变column的key
        :filters="typeFilter"
        :filter-method="filterType"
      />