初识vue（16）—— 使用 element-ui 的 el-table 时如何处理数据

  在用 element-ui 的 el-table 写表格时，曾遇到这样一个问题，后端传来的值并不能作为我表格展示的内容，我需要进行处理。比如后端传来 1 代表 “是”，0 代表 “否”，我需要把对应的文字展示出来。

  解决这个问题有两种方法。

  以下是我临时写的一个小demo，用的是 element-ui 的 el-table，我想实现的效果是：在是否加密那一列，为 1 的显示为 “是”，为 0 的显示为 “否”。

方法一：利用 Table-column Attributes 中的 formatter

  可以这样写：

  首先在 想实现效果的那一列 写上 :formatter=formatter（函数名可以自定义）

  然后在 methods 里写入函数：

  如此便实现效果了，结果如下：

  打印结果：

  如果是多个值，可以用map实现，比如 0 代表 差，1代表 一般，2代表良好，3代表 优秀

  打印结果：

方法二：利用 slot-scope

  直接在表格列表写入以下代码即可

  以上两种方式均可，在实际应用中可根据自己需要进行选择。