使用 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>
1
taomujian OP 因为 columns 进行了特殊处理,得再定义一个普通的 columns,然后自定义导出数据就行了
|