V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
taomujian
V2EX  ›  Vue.js

vue iview 导出 csv 时数据为空

  •  
  •   taomujian · 2021-04-22 14:45:28 +08:00 · 799 次点击
    这是一个创建于 1317 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用 iview 导出 csv 表格时,里面数据为空,这是咋回事.

    <template>
      <div>
          <Input v-model="keyword" placeholder="搜索关键字" class="input" @keyup.enter.native="handleFilter" />
          <Button @click="handleFilter" class="button" type="primary" icon="ios-search">搜索</Button>
          <Button @click="exportData" class="download-button" type="primary" icon="ios-download-outline">导出数据</Button>
          <Table :show-header="false" :data="tableData" :columns="columns" ref="tables">
            <template slot-scope="{ row }" slot="url">
              <div v-if="row.url" class="div">
               <a target="_blank" :href="row.url" > {{ row.url }}</a>
               <Button @click="doCopy(row.url)" type="info" class="fuzhi" size="small">复制</Button>
              </div>
            </template>
            
          </Table>
          <Page
              class="page"
              :current="this.page.pageNum"
              :page-size="this.page.pageSize"
              :total= "this.page.count"
              :page-size-opts="[10,20,30,50,100]"
              show-sizer
              show-elevator
              show-total
              @on-change="handlePage"
              @on-page-size-change="handlePageSize">
          </Page>
      </div>
    </template>
    
    <script>
    import RSA from '@/libs/crypto'
    import { search } from '@/api/search'
    export default {
      inject: ['reload'],
      name: 'SearchIndex',
      data () {
        return {
          token: getToken(),
          keyword: '',
          page: {
            pageNum: 1,
            pageSize: 10,
            count: 0
          },
          columns: [
            {
              slot: 'url',
              align: 'center'
            },
            {
              slot: 'banner'
            }
          ],
          tableData: []
        }
      },
      methods: {
        getTableData () {
          let data = {
            'pagenum': this.page.pageNum,
            'pagesize': this.page.pageSize,
          }
          data = JSON.stringify(data)
          let params = { 'data': RSA.Encrypt(data) }
          search(params).then(response => {
            this.tableData = response.data
            this.page.count = response.total
          })
        },
        exportData () {
          this.$refs.tables.exportCsv({
            filename: `${(new Date()).valueOf()}.csv`
          })
        }
      }
    }
    </script>
    
    taomujian
        1
    taomujian  
    OP
       2021-04-22 15:33:21 +08:00
    因为 columns 进行了特殊处理,得再定义一个普通的 columns,然后自定义导出数据就行了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1708 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 16:45 · PVG 00:45 · LAX 08:45 · JFK 11:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.