vue中使用formatter修改表格渲染值

一、需求描述

我们平时接收到后台传来的数据是某种状态码，或者数字标识，需要我们在前端将其转换为对应的文字内容。
如图所示，其实我们接收到的标识是0、1、2。将其转换成OS、DomainManagerComponent 等。

二、使用formatter

我们可以使用:formatter，代码如下。
prop对应你要取的值，:formatter对应方法。注意不要忘了冒号。

<el-table-column prop="standard" label="项目标准" :formatter="hasBackFormat"></el-table-column>

一般来说简单的字符串直接进行赋值返回即可。

hasBackFormat(row, column) {
      switch (row.standard) {
         case 0:
              return "OS";
         case 1:
              return "DomainManagerComponent";
          case 2:
              return "DomainManagerComponent";
        }
 }

但因为我这边的数据是个数组，所以在做数据返回的时候得处理一下。

// 是否多数据处理
hasBackFormat(row, column) {
    var typelable = '';
    for (var i = 0; i < this.standardData.length; i++) {
        if (row.standard === this.standardData[i].id) {
            typelable = this.standardData[i].name;
        }
    }
    return typelable;
}