Vue表格中对某个数据进行简单处理

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中编写函数进行处理。该流程适合大部分表格数据的处理。