路由问题
addRoutes多次添加路由重复问题（参照vue-element-admin项目）
- 在
router.js添加重置路由方法
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const createRouter = () =>
new Router({
mode: "hash",
routes: []
});
const router = createRouter();
export function resetRouter() {
const newRouter = createRouter();
router.matcher = newRouter.matcher; // reset router
}
export default router;
2. 在登出模块调用
import { resetRouter } from "@/router";
Logout({ commit, state }) {
return new Promise(resolve => {
logout(state.token)
.then(() => {
commit("SET_TOKEN", "");
commit("SET_ROLES", []);
storage.remove(ACCESS_TOKEN);
resetRouter();
resolve();
})
.catch(() => {
resolve();
})
.finally(() => {});
});
},
Cannot access 'constantRouterMap' before initialization
// main.js 先后顺序问题
import store from '@/common/store'
import router from '@/common/router'
vue antd 问题
ant-design-vue Table设置scroll.x，当没有数据时表头显示不全，且没有滚动条
/deep/ .ant-table-content {
.ant-table-scroll {
.ant-table-placeholder {
padding: 0 !important;
border-top: none !important;
}
}
}
antd-vue Table组件selectedRows翻页后不保留上一页已选
<a-table
size="default"
rowKey="id"
:columns="columns"
:data="loadData"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
onSelect:onSelect,
onSelectAll:onSelectAll,
}"
:customRow="handleCheck"
></a-table>
<script>
export default {
methods:{
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
// this.selectedRows = selectedRows // 注释这里，交由下面onSelect，onSelectAll来操作
},
onSelect(record, selected, selectedRows) {
if (selected) {
this.selectedRows.push(record)
}
if (!selected) {
const delIndex = this.selectedRows.findIndex(val => {
return val.id === record.id
})
this.selectedRows.splice(delIndex, 1)
}
},
onSelectAll(selected, selectedRows, changeRows) {
if (selected) {
this.selectedRows = this.selectedRows.concat(changeRows)
}
if (!selected) {
let selectedRows = JSON.parse(JSON.stringify(this.selectedRows))
const delIndex = []
selectedRows.forEach((item, index) => {
changeRows.forEach((val, itemIndex) => {
if (item.id === val.id) {
delIndex.push(index)
}
})
})
delIndex.forEach(item => {
delete selectedRows[item]
})
selectedRows = selectedRows.filter(item => {
return item !== undefined
})
this.selectedRows = selectedRows
}
}
}
}
</script>
vue2 + vxe-table
合并行
<vxe-table
border
resizable
height="300"
:scroll-y="{enabled: false}"
:span-method="mergeRowMethod"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="key" title="Key"></vxe-table-column>
<vxe-table-column field="content" title="Translate"></vxe-table-column>
<vxe-table-column field="language" title="Language" :filters="[{label: '中文', value: 'zh_CN'}, {label: 'English', value: 'en_US'}]"></vxe-table-column>
</vxe-table>
...
mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
// 需要合并的行
const fields = ['name']
const cellValue = row[column.property]
if (cellValue && fields.includes(column.property)) ) {
const prevRow = visibleData[_rowIndex - 1]
let nextRow = visibleData[_rowIndex + 1]
if (prevRow && prevRow.id === row.id) {
return { rowspan: 0, colspan: 0 }
} else {
let countRowspan = 1
while (nextRow && nextRow.id === row.id) {
nextRow = visibleData[++countRowspan + _rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
}
vue3 + vite
在开发环境时可以正常访问图片路径，打包部署到服务器上却显示路径undefined问题
// 获取assets静态资源 url '/home/home_icon.png'
export default const getAssetsFile = (url: string) => {
return new URL(`@/assets/images/${url}`, import.meta.url).href
}
function getImageUrl(e: object) {
const path = new URL('@/assets/img', import.meta.url);
return `${path}/${e.url}.png`
}
火狐不支持text-align: justify属性
语言设置： HTML 文档的语言设置可能会影响文本的对齐方式。如果文档的语言属性设置为非中文（例如
lang="en"），Firefox 可能会按照英文的排版规则来处理文本，这可能会导致text-align: justify;在中文文本中不起作用。你可以尝试将文档的语言属性设置为中文（lang="zh"）来解决这个问题。
vue中引入字体无效
font-family: "" 引入的名称要和字体文件里面的命名一样和src不需要一样
@font-face {
font-family: "时尚粗黑简体" !important;
src: url('./SSCHJW.TTF') format(truetype);
font-weight: normal;
font-style: normal;
}
火狐低版本无滚动条
/* 通用滚动条样式 */
::-webkit-scrollbar { /* 对于Webkit内核的浏览器 */
width: 10px; /* 滚动条宽度 */
}
::-webkit-scrollbar-track { /* 滚动条轨道 */
background-color: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb { /* 滚动条滑块 */
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
}
/* 特别针对Firefox的滚动条样式 */
.scrollbar {
-moz-appearance: none; /* 禁用默认滚动条样式 */
width: 10px; /* 滚动条宽度 */
}
scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
-moz-appearance: none; /* 禁用默认滚动条滑块样式 */
}
/* 为了确保滚动条在Firefox中的兼容性，可以使用以下实验性属性（需注意这可能不是所有版本Firefox都支持） */
* {
scrollbar-width: thin; /* 设置滚动条宽度 */
scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1); /* 分别设置滚动条滑块和轨道的颜色 */
}
