Skip to content

取本地CSV数据并分页

ts
import { computed, } from "vue";
import { ref } from "vue";
import { csv } from 'd3-request';

const query: any = ref({
  pageNum: 1,
  pageSize: 10
});

const allData: any = ref([]);
const total = ref(0);
const columns: any = ref([]);

// 分页数据
const data: any = computed(() => {
  const start = (query.value.pageNum - 1) * query.value.pageSize;
  const end = start + query.value.pageSize;
  return allData.value.slice(start, end);
});

export function useRightTable(csvPath: string = '') {

  // 拿 csv 文件数据
  function getCsvData(csvPath1: string = '') {
    readCsv(csvPath1 || csvPath).then((res: any) => {
      allData.value = res;
      total.value = res.length;

      let columns_temp: any = [];
      if (res.length > 0) {
        for (var i in res[0]) {
          columns_temp.push({
            prop: i,
            label: i,
            width: 'auto',
            align: 'center',
          })
        }
      }
      columns.value = columns_temp;
    })
  }

  // 设置查询条件
  function setSearchForm(searchForm: any = {}) {
    query.value = { ...query.value, ...searchForm };
  }

  // 读 csv 文件数据
  function readCsv(filePath) {
    return new Promise((resolve, reject) => {
      csv(filePath, (error, data) => {
        // if (error) throw error;
        if (error) {
          reject(error)
        }
        resolve(data)
      })
    })
  }

  return { total, columns, data, readCsv, getCsvData, setSearchForm }
}