记Avue中excelBtn为true，导出时字段翻译问题

问题

excelBtn为true，导出时会有像 部门(deptId)、数据类型(dataType)这种字典类型的数据，后台给到了翻译字段deptName、DataTypeName。但是在编辑的时候这些数据需要绑定的是id，导出需要的name。

思路

导出前对数据进行处理

解决方法

1、看源码找到对应触发方法

发现导出弹框触发方法为rowExcel，这个方法调出导出配置的弹窗，我们要在弹窗弹出后，点击确认前对数据进行处理；

 

 

 2、对方法进行拦截，处理数据

现在是该怎么去找到方法

通过页面布局和在线文档可以看出 这个按钮是属于menuRight插槽里的内容

 源代码中找menuRight，源码中我们好像是找不到直接的关联，但是可以看出它的上面还有一层，那就是headerMenu，而且前面有写属性就是ref:'headerMenu'，到这里我们其实可以用this.$refs.headerMenu

通过页面代码定义了Avue组件的ref，现在我们控制台看下如果打印出来this.$refs.crud是什么，验证一下上一步的猜想

 打印结果告诉我们页面可以通过refs获取到headerMenu，而且headerMneu下有rowExcel这个方法，我们只要把这个方法处理一下就可以了

 

 现在可以上手写代码了，最开始的思路在弹窗弹出后，点击确认前处理好像是有点不太可行，所以我们直接放到mouted中对方法进行拦截。还要考虑到多级表头数据的处理

mounted () {
    const crud = this.$refs.crud || {}
    const headerMenu = crud.$refs.headerMenu || {}
    let me = this
    /**
     * @description: 拦截导出事件，对数据进行翻译
     * @param {*}
     * @return {*}
     */    
    headerMenu.rowExcel = function () {
      crud.$refs.dialogExcel.handleShow()
      // 迭代函数处理多级表头的数据
      let formatterCol = (list) => {
        list.forEach(item => {
          if (item.children) {
            formatterCol(item.children)
          }
          if (item.formatter) item.prop = item.prop + 'Name'
        })
      }
      formatterCol(me.option.column)
    }
  },

 完。

---