1.CSV文件説明

逗號分隔值（Comma-Separated Values，CSV，有時也稱為字符分隔值，因為分隔字符也可以不是逗號），其文件以純文本形式存儲表格數據（數字和文本）。純文本意味着該文件是一個字符序列，不含必須像二進制數字那樣被解讀的數據。CSV文件由任意數目的記錄組成，記錄間以某種換行符分隔；每條記錄由字段組成，字段間的分隔符是其它字符或字符串，最常見的是逗號或製表符。通常，所有記錄都有完全相同的字段序列。通常都是純文本文件。建議使用WORDPAD或是記事本來開啓，再則先另存新檔後用EXCEL開啓，也是方法之一。

2.CSV數據格式轉換

下面是一個實際 CSV 文件中的部分內容，讓大家對他有一個感性的認識。我們選的是 Sjojo_Rescan 的 CSV 文件 (Sjojo 是 ASW- 亞洲掃圖風的成員之一)。
文件名， 文件大小 (以字節為單位)，CRC 校驗值，
sj_mino1001.jpg，715282，4FB55FE8，
sj_mino1002.jpg，471289，93203C5C，
sj_mino1003.jpg，451929，C4E80467，

通常 CSV 文件開頭是不留空的，以行為單位，每行中記錄一張圖片的多項數據，每項數據用逗號來分隔（標準英文逗號）。一般説來集圖用的.CSV 文件的格式是這樣的：
文件名， 文件大小 (以字節為單位)，CRC 校驗值， 註釋 (可省略)
sj_mino1001.jpg，715282，4FB55FE8，

默認情況下，我們認為csv的第一行數據是表頭，所以，我們預期是將上面這段內容轉為：
想展示成如下表格效果：

<script>
const str = `文件名, 文件大小 (以字節為單位),CRC 校驗值,
sj_mino1001.jpg,715282,4FB55FE8,
sj_mino1002.jpg,471289,93203C5C,
sj_mino1003.jpg,451929,C4E80467,`

const formatCSVToTable = (str) => {
      const result = [];
      const jsonObj = str.split("\n");
      let arrHeader = [];
      for (const i in jsonObj) {
        if (typeof jsonObj[i] === 'string' && jsonObj[i].length > 0) {
          const row = `${jsonObj[i]}`;
          if (row.trim().length > 0) {
            const kv = jsonObj[i].split(',');
            if (i == 0) {
              // 獲取column表頭
              arrHeader = kv;
            } else {
              const obj = {};
              for (let index = 0; index < arrHeader.length; index++) {
                // 組裝表格數據
                const name = String(arrHeader[index]);
                if (!arrHeader[index]) continue
                if (!obj[name]) {
                  try {
                    if (kv[index]) {
                      obj[name] = String(kv[index]);
                    } else {
                      obj[name] = '';
                    }
                  } catch (err) {
                    obj[name] = '';
                  }
                }
              }
              result.push(obj);
            }
          }
        }
      }
      return result
    }

formatCSVToTable(str)
</script>

輸出如下：

3.表格預覽展示

使用elementUI的el-table組件展示
組裝表頭

let column = [];
for (let item in CSVList[0]) {
  column.push({
    label: item,
    prop: item,
  })
}

表格渲染
`<el-table :data="CSVList">

  <el-table-column :label="item" :prop="item" v-for="item in column" :key="item"></el-table-column>

</el-table>`
展示效果

寫在最後

以上可以借鑑，可能不能完全滿足，如有不足，請大佬指出！