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中編寫函數進行處理。該流程適合大部分表格數據的處理。