重点:[1] const methods = this.$options.methods    // 获取本组件下的所有method

            [2] methods[item.methodName].call(this, item)  // 使用this.$options.methods 会有this指向问题

<script>
import _ from 'lodash'
import adImage from '@/assets/base/ad.png'
import manageService from '@/services/manage'

export default {
  data() {
    return {
      bannerImgList: [
        {imgUrl: adImage}, 
        {imgUrl: adImage},
        {imgUrl: adImage},
      ],
      menuList: [
        {menuCode: '100', icon: 'cashier-o', menuName: '商品管理', url: '/manage/query-goods'},
        {menuCode: '101', icon: 'add-o',     menuName: '商品入库', url: '/manage/goods-inbound'},
        {menuCode: '102', icon: 'close',     menuName: '商品出库', url: '/manage/goods-outbound'},
        {menuCode: '104', icon: 'search',    menuName: '订单查询', url: '/manage/query-order', methodName: 'getTodayOrderNum'},
        {menuCode: '105', icon: 'chart-trending-o', menuName: '订单分析', url: '/manage/analyse-order'},
      ],
    }
  },
  activated() {
    // 查询每个菜单是否执行方法
    this.queryMenuExceMethod()
  },
  methods: {
    async queryMenuExceMethod() {
      //  获取本组件下的所有method
      const methods = this.$options.methods
      _.forEach(this.menuList, item => {
        // 判断是否需要执行函数
        if (!!item.methodName) {
          // 使用this.$options.methods 会有this指向问题
          methods[item.methodName].call(this, item)
        }
      })
    },
    async getTodayOrderNum(item) {
      const orderNum = await manageService.getTodayOrderNum()
      if (!orderNum) return 
      this.$set(item, "badge", orderNum)
    },
    more() {
      this.$toast('功能开发中...')
    }
  }
}
</script>

 

Logo

前往低代码交流专区

更多推荐