QUASAR框架和vue 3.0导出功能

首先在表格的上方添加一个插槽，如下图所示：

<template v-slot:top>

      <q-btn

                        dense //标准间距

                        color="颜色" 

                        icon-right="图标的名称" 

                        label="导出功能的名称"

                        no-caps

                        @click="exportTable"

                        />

      </template>

接下来要把表中的数据导出来，所以需要写一个函数

function exportTable () {

      const newcolumns = columns

      const content = [newcolumns.map(col => wrapCsvValue(col.label))]

        .concat(

          originalRows.map(row => newcolumns.map(col => wrapCsvValue(typeof col.field === 'function'

            ? col.field(row) : row[col.field === void 0 ? col.name : col.field], col.format

          )).join(','))

        ).join('\r\n')

      const status = exportFile(

        'text.csv',    //下载出来表格的格式

        ['\uFEFF' + content],

        'text/csv'

      )

      if (status !== true) {

        this.$q.notify({

          message: 'Browser denied file download...',

          color: 'negative',

          icon: 'warning'

        })

      }

    }

最后一步在return里面调用一下此函数

return {

      exportTable, 

  }