element-ui 表格列的格式化和过滤方法，项目中的应用。

1. formatter属性格式化

案例

把从后端拿到的表示聘用形式的状态码格式化为实际数据。
例如，1转化成 “正式”，2转化成"非正式",渲染到表格中。

---

下面是枚举的参照数据，一般为一个js文件，导出的是后端返回数据对应的实际意义。

 export default {
  // 聘用形式
  hireType: [
    {
      id: 1,
      value: '正式'
    },
    {
      id: 2,
      value: '非正式'
    }
  ],
 }

方法

在表格列标签el-table-column中绑定formatter属性，值为一个函数，定义在methods中，此处我们命名为formatEmployment格式化聘用形式。

<el-table-column 
label="聘用形式" 
prop="formOfEmployment"  
:formatter="formatEmployment" />

formatEmployment函数：

1. 接收4个参数，分别为（行数据对象，列属性对象，单元格数据，索引)
2. 返回值为要渲染的实际数据。

思路：我们只需要用到第3个参数cellValue单元格数据，通过数组的find方法从枚举数据中找到cellValue对应的对象，并返回该对象的value值即可。

   
    formatEmployment(row, column, cellValue, index) {
      // hireType为枚举的数组数据,obj为cellValue对应的对象
      const obj = hireType.find(item => item.id === cellValue)
      // 如果找不到对应的对象,find的返回值为undefined，因此手动格式化为'未知'
      return obj ? obj.value : '未知'
    }

此时表格中的数据就格式化完成了。

---

2. 表格列的插槽配合过滤器的方法：

案例：

这是从后端拿到时间数据： ‘2018-11-02T08:00:00.000+0000’
我们需要渲染的数据格式：’ 2018-11-02’

方法

我们可以先定义一个过滤时间函数formatDate，接收要过滤的时间参数，返回过滤后的时间，代码不写了。

然后回到表格标签中

 <el-table-column label="入职时间" prop="timeOfEntry">
      <template v-slot="{row}">
         {{ row.timeOfEntry | formatDate }}
      </template>
</el-table-column>

在表格列标签el-table-column中插入插槽，通过v-slot="{row}"解构的方式可以拿到elment-ui为我们传入的行数据row,通过row.timeOfEntry可以拿到过滤前的时间，配合Vue的过滤器，通过插值表达式的方法得到新的时间。

此时过滤后的时间便可以渲染到页面中。