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

Question

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

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

{    "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就是我分装的方法，但是封装的有问题，展示出来的还是数字

Answer 1

const statusData = {    "status": [{ "label": "待发布", "value": "1"}],    "edu":[{ "label": "小学", "value": "1" } ]}// 初始化一个新的 Map 对象，同时每个键对应的值都是一个空的 Map 对象。键的部分来源于statusData 对象的键（包括 "status" 和 "edu"）const statusMap = new Map(Object.keys(statusData).map(key => ([key, new Map()]))// 循环遍历 statusData 中的每一项数据for (let key in statusData) {    // 获取当前 key 对应的 Map 对象    const map = statusMap.get('key')    // 遍历 statusData 中当前 key 对应的数组，对数组中的每一项 itm，将 itm.value 作为 map 的键，itm.label 作为 map 的值，将其添加到 map 中。    statusData[key].map(itm => map.set(itm.value, itm.label))}// 表格进行映射的时候可以这么写// statusMap.get('status').get(scope.row.value)

可以让filterVal接受两个参数，分别是prop和对应的value

        <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, scope.row[item.prop]) }}            </slot>          </template>        </el-table-column>

然后在filterVal里面用刚刚算出来的map直接返回对应的label

filterVal(prop, val) {    return statusMap.get(prop).get(val)}

Answer 2

const statusConfig = {    "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"        }      ]};const tableData = [    {        "status": 1,        "edu": 2    },    {        "status": 1,        "edu": 3    },    {        "status": 2,        "edu": 6    },    {        "status": 3,        "edu": 7    }];const transformedTableData = tableData.map(row => {    return {        ...row,        status: statusConfig.status.find(s => s.value === row.status.toString())?.label,        edu: statusConfig.edu.find(e => e.value === row.edu.toString())?.label    };});console.log(transformedTableData);

<template>  <el-table :data="transformedTableData">    <!-- el-table 的其他配置 -->  </el-table></template><script>export default {  props: {    statusConfig: {      type: Object,      required: true    },    tableData: {      type: Array,      required: true    }  },  computed: {    transformedTableData() {      return this.transformData(this.tableData, this.statusConfig);    }  },  methods: {    transformData(tableData, statusConfig) {      return tableData.map(row => {        const newRow = { ...row };        Object.keys(statusConfig).forEach(key => {          const config = statusConfig[key];          newRow[key] = config.find(item => item.value === row[key].toString())?.label;        });        return newRow;      });    }  }};</script>

// 数据过滤filterVal(prop, val) {  const propList = this.formUniData[prop] || [];  if (propList.length > 0) {    const item = propList.find(item => item.value === val.toString());    return item ? item.label : '-';  }  return val;}