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
函数:
- 接收4个参数,分别为(行数据对象,列属性对象,单元格数据,索引)
- 返回值为要渲染的实际数据。
思路:我们只需要用到第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的过滤器,通过插值表达式的方法得到新的时间。
此时过滤后的时间便可以渲染到页面中。