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

• Z时代
• 2024-02-26
• 分类：IT

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

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

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

回答：

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;
}

回答：

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)
}

以上是 el-table表格数据状态怎么转换？ 的全部内容， 来源链接： utcz.com/p/934850.html