- 有tailwindcss样式会和elementUi的样式冲突,具体表现primary的el-button背景蓝色变白
- 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',
},
},
],
},
- axios返回的状态码非2开头时,要用.catch捕获错误信息
- axios配置默认的baseURL,直接在App.vue文件中写
import axios from 'axios'
axios.defaults.baseURL = 'http://ip:端口'
- 引入全局的CSS文件也可以在App.vue的style中
<style>
@import './index.css';
</style>
- 不想让用户可以返回上一页,可以使用router.replace
- axios请求加上请求头时请求报错
- 使用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)
})
}
- 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"
/>