弹窗this.$confirm中调用函数，获取不到嵌入table的ref值

Question

点击导出判断是否打印子集数据，获取不到子表格展开之前的ref值。只有当点击展开后才会获取到ref: childTable

html

<vxe-table>
   ref="xTable"
  :expand-config="{ accordion: 'true',  visibleMethod: expandVisibleMethod, toggleMethod: toggleExpandMethod}"
  :data="datas">
  <vxe-table-column type="expand" width="60">
    <template v-slot:content="{ row }">
        <!-- 嵌入的table -->
        <vxe-table
          ref="childTable"  
          :data="row.children"
        >
              <vxe-table-column type="seq" title="排序" min-width='60' width="60"></vxe-table-column>
        </vxe-table>
    </template>
  </vxe-table-column>
</vxe-table>

 dropdownMenuEvent() {
      // console.log(this.$refs)  // 没有打印出 childTable
      this.$confirm({
        title: '要打印子集菜单吗?',
        okText: '确认',
        cancelText: '取消',
        okType: 'info',
        content: h => <div style="color:red;">导出可能需要一定时间</div>,
        onOk: () => {
          console.log(data);
          let arr = {expanded: true, row: this.testList};
          this.toggleExpandMethod(arr); 
        },
        onCancel: () => {
          this.$api.transformer.exportExcel({}).then((data)=>{
            console.log(data);
            console.log(this.$refs)
            this.$refs.xTable.exportData({
              filename: '变压器实时数据',
              sheetName: 'Sheet1',
              type: 'xlsx',
              data: data.trList
            })
          })
          console.log('取消');
        },
        class: 'test',
      });
    },
  },
  
  // 导出-包含子集数据
  exHasChild(){
    this.$api.transformer.exportExcel({
      tag: 1
    }).then((data)=>{
      console.log(data);
      this.$refs.childTable.exportData({
        filename: `变压器-实时数据(包含子集数据)`,
        sheetName: 'Sheet1',
        type: 'xlsx',
        data: data.windingList
      })
    })
  },

// 展开嵌入的table表格
toggleExpandMethod ({ expanded, row }) {
      console.log(expanded)
      console.log(row)
      console.log(this.testList)
      console.log(this.$ref) // 依旧没有获取到 childTable 这个ref

      if (expanded) {
        if (row.children != []) {
          return true
        } else if(row != {}) {
          this.exHasChild()
          return true
        }
      } 
    },

之前这种是可以导出的

    toggleExpandMethod ({ expanded, row }) {
      if (expanded) {
        if (row.children != []) {
          this.showConfirm(row.st_name)
          return true
        }
      }
    },
    // 判断是否打印子集
    showConfirm(st_name) {
      let that = this
      this.$confirm({
        title: '要打印子集菜单吗?',
        okText: '确认',
        cancelText: '取消',
        okType: 'info',
        content: h => <div style="color:red;">输出可能需要一定时间</div>,
        onOk() {
          console.log('确认');
          that.$api.transformer.dataCheckExportExcel({}).then((data)=>{
            console.log(data);
            that.$refs.childTable.exportData({
              filename: `变压器-数据校核-${st_name}子集数据`,
              sheetName: 'Sheet1',
              type: 'xlsx',
              data: data.trList
            })
          }) 
        },
        onCancel() {
          console.log('取消');
        },
        class: 'test',
      });
    },

Answer 1

验证下dropdownMenuEvent的this指向哪里

---

多嘴提一句，用变量that是es5的糟粕，es6还这么写看着真难受，你onOk，onCancel回调可以用箭头函数绑定作用域。