1.组件自带的格式化方法

2.全局注册过滤器

3.用el-switch

这三列的数据需要格式化

 <el-table border :data="list"><el-table-column label="序号" sortable="" type="index" /><el-table-column label="姓名" sortable="" prop="username" /><el-table-column label="工号" sortable="" prop="workNumber" /><el-table-column label="聘用形式" sortable="" prop="formOfEmployment" /><el-table-column label="部门" sortable="" prop="departmentName" /><el-table-column label="入职时间" sortable="" prop="timeOfEntry" /><el-table-column label="账户状态" sortable="" prop="enableState" /><el-table-column label="操作" sortable="" fixed="right" width="280"><template><el-button type="text" size="small">查看</el-button><el-button type="text" size="small">转正</el-button><el-button type="text" size="small">调岗</el-button><el-button type="text" size="small">离职</el-button><el-button type="text" size="small">角色</el-button><el-button type="text" size="small">删除</el-button></template></el-table-column></el-table>
prop对应数据

1. 格式化聘用形式

用el-table里自带的格式化方式

引入员工枚举文件

import EmployeeEnum from '@/api/constant/employees' // 员工信息的枚举
// 格式化聘用形式formatEmployment(row, column, cellValue, index) {// 去EmployeeEnum里找1所对应的值，cellValue是当前单元格的值const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)return obj ? obj.value : '未知'}

聘用形式变成了 正式/非正式

2.格式化入职时间

用过滤器方法做，引入一个全局的过滤器文件（里面有各种格式化函数），到main.js，全局都可以使用

把这个文件（里面各种过滤器）引入main.js中进行注册

main.js
// 引入全局注册的过滤器
import * as filters from '@/filters'Object.keys(filters).forEach(key => {Vue.filter(key, filters[key])
})

   <el-table border :data="list"><el-table-column label="序号" sortable="" type="index" /><el-table-column label="姓名" sortable="" prop="username" /><el-table-column label="工号" sortable="" prop="workNumber" /><el-table-column label="聘用形式" :formatter="formatEmployment" sortable="" prop="formOfEmployment" /><el-table-column label="部门" sortable="" prop="departmentName" />//使用了作用域插槽，解构出row，里面有当前行的数据<el-table-column label="入职时间" sortable="" prop="timeOfEntry"><template v-slot="{row}">{{ row.timeOfEntry|formatDate }}</template></el-table-column><el-table-column label="账户状态" sortable="" prop="enableState" /><el-table-column label="操作" sortable="" fixed="right" width="280"><template><el-button type="text" size="small">查看</el-button><el-button type="text" size="small">转正</el-button><el-button type="text" size="small">调岗</el-button><el-button type="text" size="small">离职</el-button><el-button type="text" size="small">角色</el-button><el-button type="text" size="small">删除</el-button></template></el-table-column></el-table>

3.格式化账户状态

用到el-switch组件

   <el-table-column label="账户状态" sortable="" prop="enableState"><template v-slot="{row}"><el-switch :value="row.enableState===1" />     value绑定值</template></el-table-column>

账户状态变成了开关形式