Vue表格中對某個資料進行簡單處理

在很多的場景中，我們後端從資料庫拿到的資料需要進行一些處理再展示到前端上，比如本文舉例的論文查重系統中的重複率這一列，該列的資料在資料庫是小數形式存在，前端需要展示的是百分比形式。這樣我們需要前端對資料進行一個處理。

在vue檔案中，首先在列表的程式碼中，我們需要在需要處理的列中加上屬性項:formatter=FunctionName。將該列資料和處理函式進行繫結

<el-table-column  prop="totalxsl"
                  :formatter="addTotalxsl"
                  label="相似率">
</el-table-column>
 

然後在該頁面的vue中的methods中編寫addTotalxsl函式

addTotalxsl (row , column) {
      var data = row[column.property]
      if(data == null){
        return
      }
      return data.toFixed(3) * 100 + '%'
    }
//row[column.property]可以讀取到該列的資料

函式的功能是根據自己的需要自行編寫的，注意必須要return資料回列表

流程總結：在html程式碼中找到需要處理的column使用formatter進行函式繫結，然後在methods中編寫函式進行處理。該流程適合大部分表格資料的處理。