elementui表格需要根据值显示文字

在工作中,可能会遇到elementUI表格上线显示状态的值为(新建,处理中),显示出来却是对应的数字,的问题.

解决:

1.在elementUI表格结构上使用插槽.

<el-table-column label="状态">
        <template #default="scope">
          <!-- 插值表达式支持函数执行 并且渲染的是函数的return值 -->
          {{ formatEmployment(scope.row.zt) }}
        </template>
      </el-table-column>

2.在 methods中定义这个函数.

formatEmployment (type) {
      // 根据源数据经过处理 把处理之后的数据返回
      // 定义一个映射结构
      const map = {
        10: '新建',
        20: '处理中',
        30: '审核不通过',
        40: '处理结束'

      }
      return map[type]
    }

效果图: