iview导出部分数据_vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑用iview自带的导出方法自定义

你可以使用iview中的Table组件结合自定义的导出方法实现导出部分数据的功能，具体步骤如下：

1. 在Table组件中设置pagination属性为false，禁用分页功能，同时设置selection属性为true，开启多选框功能。

2. 在Table组件的右上角添加一个“导出”按钮，绑定一个自定义的方法。

3. 在自定义的导出方法中，先获取到当前选中的数据（最多2000条），然后将这些数据转换成CSV格式，并通过浏览器下载功能提供给用户下载。

下面是一个示例代码，仅供参考：

<template>
  <div>
    <Button type="primary" @click="handleExport">导出</Button>
    <Table :data="tableData" :columns="columns" :pagination="false" :selection="true"></Table>
  </div>
</template>

<script>
import { Button, Table } from 'view-design'
import { exportCsv } from '@/utils'

export default {
  components: {
    Button,
    Table
  },
  data() {
    return {
      tableData: [], // 表格数据
      columns: [] // 表格列配置
    }
  },
  methods: {
    handleExport() {
      const selectedRows = this.$refs.table.getSelectedRecords()
      if (selectedRows.length === 0) {
        this.$Message.warning('请先选择需要导出的数据')
        return
      }
      if (selectedRows.length > 2000) {
        this.$Message.warning('每次最多只能导出2000条数据')
        return
      }
      const csvData = []
      // 处理表头
      csvData.push(this.columns.map(column => column.title).join(','))
      // 处理表格数据
      selectedRows.forEach(row => {
        csvData.push(this.columns.map(column => row[column.key]).join(','))
      })
      exportCsv(csvData.join('\n'), '导出数据.csv')
    }
  }
}
</script>

在上面的代码中，我们使用iview中的Button和Table组件实现了一个简单的表格展示，并添加了一个“导出”按钮。在自定义的handleExport方法中，我们先通过this.$refs.table.getSelectedRecords()方法获取到当前选中的数据，然后判断选中的数据是否超过2000条，如果超过则提示用户最多只能导出2000条数据。

接下来，我们将选中的数据转换成CSV格式，并通过一个名为exportCsv的工具函数提供给用户下载。具体的CSV转换和下载过程可以参考下面的代码：

/**
 * 导出CSV文件
 * @param data CSV数据，以逗号分隔的字符串
 * @param filename 文件名
 */
export function exportCsv(data, filename) {
  const blob = new Blob(['\ufeff' + data], { type: 'text/csv;charset=utf-8;' })
  if (navigator.msSaveBlob) {
    navigator.msSaveBlob(blob, filename)
  } else {
    const link = document.createElement('a')
    if (link.download !== undefined) {
      const url = URL.createObjectURL(blob)
      link.setAttribute('href', url)
      link.setAttribute('download', filename)
      link.style.visibility = 'hidden'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}

上面的代码中，我们先通过Blob对象创建一个CSV数据流，然后通过URL.createObjectURL方法生成一个下载链接，并将该链接添加到一个隐藏的a标签中，最后模拟用户点击a标签实现下载功能。

总的来说，通过iview中的Table组件结合自定义的导出方法，我们可以非常方便地实现导出部分数据的功能。