vue element admin 问题汇总

vue element admin 问题汇总"/>

vue element admin 问题汇总

一、样式

postmessage解决iframe页面跨域

11、接口user返回值roles[‘user’,‘admin’], 判断路由权限(第9不适用)

function filterAsyncRouter(routes, roles) {const res = []routes.forEach(route => {const tmp = { ...route }if (tmp.meta.type === 'home') {res.push(tmp)} else {if (tmp.meta.checkPermission) {if (hasPermission(roles, tmp)) {res.push(tmp)if (tmp.children) {tmp.children = filterAsyncRouter(tmp.children, roles)}}} else {res.push(tmp)}}})return res
}function hasPermission(roles, route) {if (route.meta && route.meta.roles) {return roles.some(role => route.meta.roles.includes(role))} else {return true}
}

10、限制选时间范围

          <el-form-item label="销售日期"><el-date-pickerv-model="selectDateStr":picker-options="pickerOptions"type="daterange"style="width: 100%;"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"@change="changeDate"/></el-form-item>pickerOptions: {disabledDate: this.disabledDate},disabledDateVal: ['2023-01-01 00:00:00', '2023-06-01  23:59:59']/*** 限制日期*/disabledDate(time) {return time.getTime() > new Date(this.disabledDateVal[1]).getTime() ||time.getTime() < new Date(this.disabledDateVal[0]).getTime()},

10、store全局变量

      dialogTitle: this.$store.getters.name,

9、判断静态路由隐藏

store.dispatch('GenerateRoutes', obj).then(() => { // 根据roles权限生成可访问的路由表GenerateRoutes({ commit }, data) {return new Promise(resolve => {const { resources } = dataconst { roles } = datalet accessedRoutersif (roles.includes('admin')) {accessedRouters = asyncRouterMap} else {accessedRouters = filterAsyncRouter2(asyncRouterMap, resources)}console.log('-11-', data)accessedRouters = accessedRouters.map(e => {for (let i = 0; i < e.children.length; i++) {if (e.children[i].path === 'promoter') {e.children[i].hidden = truebreak}}return { ...e }})console.log('-2-', accessedRouters)commit('SET_ROUTERS', accessedRouters)resolve()})}

8、弹框导致右侧有白间隙

.el-popup-parent--hidden {padding-right: 0!important;
}

7、数字转千分符

function toThousandFilter(num) {return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}
// 数字转千分符 -  .后面不带00 
export function thousandNum(value) {if (!value && value !== 0) return '-'const intPart = Number(value) | 0 // 获取整数部分const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断let floatPart = '.00' // 预定义小数部分const value2Array = value.toString().split('.')// =2表示数据有小数位if (value2Array.length === 2) {floatPart = value2Array[1].toString() // 拿到小数部分return intPartFormat + '.' + floatPart} else {return intPartFormat}
}
// 数字转千分符
export function thousandNum(value) {if (!value && value !== 0) return '-'const intPart = Number(value) | 0 // 获取整数部分const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断let floatPart = '.00' // 预定义小数部分const value2Array = value.toString().split('.')// =2表示数据有小数位if (value2Array.length === 2) {floatPart = value2Array[1].toString() // 拿到小数部分if (floatPart.length === 1) {// 补0,实际上用不着return intPartFormat + '.' + floatPart + '0'} else {return intPartFormat + '.' + floatPart}} else {return intPartFormat + floatPart}
}

6、可视化低代码表单

/

5、加分号符

<span v-if="orderDetail.otherFees.length">{{ '(' }}<span v-for="(item, index) in orderDetail.otherFees" :key="index">{{ item.feesType.feesName + '：' }}{{ item.amount + '元' }}{{ index + 1 !== orderDetail.otherFees.length ? ';' : '' }}</span>{{ ')' }}</span>

4、重置

      queryCondition: {batchNo: '',createUserId: null,beginCreateTimeNew: '', // 开单开始时间endCreateTimeNew: '',goodsId: null,buyerId: null,beginCreateTime: '', // 销售开始时间endCreateTime: '',orderNo: '',type: ''},emptySearch: {},mounted() {this.emptySearch = JSON.parse(JSON.stringify(this.queryCondition))this.getBatchList()},/*** 重置*/reset() {this.queryCondition = JSON.parse(JSON.stringify(this.emptySearch))},

3、菜单

  {path: '/manage',component: Layout,redirect: 'manage',type: 'mainmenu',meta: { title: 'manage', cnTitle: '经营', icon: 'folders', type: 'home' },children: [{path: 'management',component: () => import('@/views/tally/manage/management/inGoods/index'), // Parent router-viewname: 'management',meta: { title: 'management', icon: 'manage-mg' },children: [{path: 'inGoods',component: () => import('@/views/tally/manage/management/inGoods'),name: 'inGoods',meta: { title: 'inGoods', cnTitle: '来货统计' }},{path: 'menu1-3',component: () => import('@/views/nested/menu1/menu1-3'),name: 'Menu1-3',meta: { title: 'Menu1-3' }}]},{path: 'report',component: () => import('@/views/tally/manage/report/agentFees/index'), // Parent router-viewname: 'report',meta: { title: 'report', icon: 'manage-report' },children: [{path: 'agentFees',component: () => import('@/views/tally/manage/report/agentFees'),name: 'agentFees',meta: { title: 'agentFees', cnTitle: '代卖费统计' }},{path: 'menu1-3',component: () => import('@/views/nested/menu1/menu1-3'),name: 'Menu1-3',meta: { title: 'Menu1-3' }}]}]},

2、更换导航栏图标

1、全局样式

.modify-dialog {height: calc(100% - 40px);margin-top: 20px !important;
}
.el-dialog__footer {padding: 20px;border-top: 1px solid #f0f0f0;
}
.el-dialog__header {padding: 20px;border-bottom: 1px solid #f0f0f0;
}
// table  thead填背景色
.el-table thead tr th {background-color: #fafafa !important;
}
// table  偶数行填背景色
.el-table .el-table__body .el-table__row:nth-child(2n) {background: #F5F9FF;
}