el-table表格数据状态怎么转换？

表格数据转换，后台返回的表格数据状态都是数字，所以前台需要转换一下。

后台返回的状态配置数据：

{
    "status": [
        {
            "label": "待发布",
            "value": "1"
        },
        {
            "label": "上线中",
            "value": "2"
        },
        {
            "label": "已下线",
            "value": "3"
        }
    ],
    "edu":[
        {
          "label": "小学",
          "value": "1"
        },
        {
          "label": "初中",
          "value": "2"
        },
        {
          "label": "高中",
          "value": "3"
        },
        {
          "label": "本科",
          "value": "4"
        },
        {
          "label": "研究生",
          "value": "5"
        },
        {
          "label": "博士",
          "value": "6"
        },
        {
          "label": "博士后",
          "value": "7"
        }
      ]
}

表格数据

[
    {
        "status": 1,
        "edu": 2
    },
    {
        "status": 1,
        "edu": 3
    },
    {
        "status": 2,
        "edu": 6
    },
    {
        "status": 3,
        "edu": 7
    }
]

根据状态配置数据使得前台表格展示相应的名称label。

我是怎么处理的呢，我对el-table进行二次分装，然后在处理数据转换

<template>
  <div
    :style="`${$attrs.height? 'height:'+$attrs.height:''};`"
    class="eletable-container"
  >
    <el-table
      ref="table"
      v-loading="searching"
      :data="pagedData"
      :border="border"
      stripe
      highlight-current-row
      v-bind="$attrs"
      v-on="$listeners"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, index) in columnList">
        <el-table-column
          v-if="item.slotScope"
          :key="item.prop + index"
          v-bind="item"
          :label="$t(item.label)"
        >
          <template slot-scope="scope">
            <slot
              :name="item.prop"
              v-bind="scope"
            >
              {{ filterVal(item.prop, item.prop) }}
            </slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.selection"
          :key="`selection${index}`"
          type="selection"
          :width="item.width || 50"
          :align="item.align || 'center'"
        />
        <column
          v-else
          :key="item.prop + index"
          :column="item"
        />
      </template>
    </el-table>

    <el-pagination
      class="el-pagination"
      v-if="displayPagination"
      :current-page="currentPage"
      :page-sizes="page_sizes"
      :page-size="size"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { deepCopy } from '@/utils'
import scrollTo from '@/utils/scrollTo'
import Column from './column'
import { getFormUniData } from '@/api/taskPool'

export default {
  name: 'EleTable',
  components: {
    Column,
  },
  props: {
    remoteMethod: {
      type: Function,
      default: null,
    },
    page_size: {
      type: Number,
      default: 20,
    },
    page_sizes: {
      type: Array,
      default: () => [15, 20, 30, 40, 50],
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    border: {
      type: Boolean,
      default: true,
    },
    displayPagination: {
      type: Boolean,
      default: true,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    columnList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      postData: {},
      searching: false,
      data: [],
      currentPage: 1,
      size: this.page_size,
      total: 0,
      bodyWrapperEl: undefined,
      formUniData: {},
    }
  },
  computed: {
    pagedData() {
      scrollTo(this.bodyWrapperEl)
      if (this.remoteMethod || !this.displayPagination) {
        return this.data
      }

      const offset = (this.currentPage - 1) * this.size
      return this.data.slice(offset, offset + this.size)
    },
  },
  watch: {
    tableData: {
      handler(val) {
        this.data = val || []
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.bodyWrapperEl = this.$refs.table.$el.querySelector(
      '.el-table__body-wrapper'
    )
    this.getFormUniData()
  },
  methods: {
    async loadData(params, callback) {
      if (this.remoteMethod) {
        this.currentPage = 1
        await this._loadData(params, callback)
      }
    },
    async _loadData(params, callback) {
      if (!this.remoteMethod) {
        return
      }

      if (params) {
        this.postData = deepCopy(params)
      }
      this.postData = this.postData || {}
      this.postData.page = this.currentPage
      this.postData.page_size = this.size
      this.searching = true
      try {
        const response = await this.remoteMethod(this.postData)
        if (response) {
          const { data, recordsCount } = response
          this.data = data
          this.total = recordsCount
          this.$emit('data-change', data)
          this.$emit('page-change', this.postData)
          if (callback && typeof callback === 'function') {
            callback(data)
          }
        }
      } catch (e) {
        this.data = []
      }
      this.searching = false
    },
    handleSizeChange(size) {
      this.size = size
      this._loadData()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this._loadData()
    },
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    // 数据过滤
    filterVal(prop, val) {
      const propList = this.formUniData[prop] || []
      this.pagedData.forEach(item => {
        const res = Object.keys(item).filter(it => it == val)
        console.log(res, 'res=====');
      });
      
      console.log(propList, 'propList=====');
      if (propList.length > 0) {
        const item = propList.filter((item) => item.value == val)[0]
        console.log('item------', item)
        return item ? item.label : '-'
      }
      return val
    },
    // 获取配置列表接口
    async getFormUniData() {
      try {
        const data = await getFormUniData()
        this.formUniData = data
      } catch (error) {
        return this.$message(error)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.eletable-container {
  padding: 20px 0;
}

.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>

filterVal就是我分装的方法，但是封装的有问题，展示出来的还是数字