表格数据格式化 枚举 时间

表格数据格式化

表格数据格式化

本节任务:  对后端直接给到的数据做一些格式化处理，包括聘用形式

 <el-table :data="list" border>
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <!--
            prop指定对应要渲染的字段就可以原样输出
            如果你想要进行转化 prop是不行
            如果要转二次转化  借助插槽 拿到原始数据 做处理之后 在输出
           -->
          <el-table-column label="聘用形式">
            <template #default="{ row }">
              <!--
                差值表达式可以支持方法调用不？可以 如果写一个函数调用 渲染的是啥？函数的返回值
                思路：编写一个格式化的函数 在函数里面进行有效的格式化 最后把格式化之后的数据return
              -->
              {{ formatEmployee(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" width="180" prop="correctionTime">
            <template #default="{ row }">
              {{ formatTime(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="{row}">
              <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
              <el-button type="text" size="small" @click="assignRoles(row.id)">分配角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        
        formatEmployee(value) {
      // 格式化
      // 通过枚举的写法定义一个对象关系
      // 好处：1. 它可以简化ifelse分支语句  2.对应关系清晰明了方便灵活扩展
      const TYPE = {
        1: '正式',
        2: '非正式员工',
        3: '临时员工',
        4: '老板亲戚'
      }
      return TYPE[value]
    },
    //时间格式转换
    formatTime(value) {
      return dayjs(value).format('YYYY-MM-DD')
    }