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-picker
              v-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 } = data
        const { roles } = data
        let accessedRouters
        if (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 = true
              break
            }
          }
          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、可视化低代码表单

https://www.vform666.com/

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-view
        name: '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-view
        name: '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;
}