组件开发实战：巧用 Vue 重组复杂数据，轻松渲染到 Element UI Table

2023-10-27 19:01:41

前言

在前端开发中，我们经常会遇到需要将复杂数据渲染到表格中的情况。如果数据是 Array 类型，我们可以直接使用 Element UI 的 table 组件进行渲染。但是，如果数据不是 Array 类型，我们就需要对数据进行重组，使其符合 table 组件的要求。

一、数据重组

首先，我们来看一下如何将两个非 Array 类型的复杂数据进行重组。假设我们有两个数据对象，如下所示：

const data1 = {
  name: '张三',
  age: 20,
  hobby: ['看书', '听音乐', '打篮球']
};

const data2 = {
  name: '李四',
  age: 22,
  hobby: ['旅游', '摄影', '美食']
};

我们要将这两个数据对象重组为一个新的对象，使其符合 table 组件的要求。新的对象应该具有以下结构：

const newData = [
  {
    name: '张三',
    age: 20,
    hobby1: '看书',
    hobby2: '听音乐',
    hobby3: '打篮球'
  },
  {
    name: '李四',
    age: 22,
    hobby1: '旅游',
    hobby2: '摄影',
    hobby3: '美食'
  }
];

我们可以使用以下步骤来对数据进行重组：

将两个数据对象合并成一个新的对象。
遍历新的对象，并为每个数据项创建一个新的键，其名称为 hobby1、hobby2、hobby3，依次类推。
将每个数据项的 hobby 值分别赋值给 hobby1、hobby2、hobby3 等键。

代码如下：

const newData = [];

for (const key in data1) {
  if (key !== 'hobby') {
    newData[0][key] = data1[key];
    newData[1][key] = data2[key];
  } else {
    for (let i = 0; i < data1.hobby.length; i++) {
      newData[0]['hobby' + (i + 1)] = data1.hobby[i];
      newData[1]['hobby' + (i + 1)] = data2.hobby[i];
    }
  }
}

二、渲染数据

现在，我们已经将数据重组为符合 table 组件要求的格式。接下来，我们就可以使用 Element UI 的 table 组件来渲染数据了。

在 Vue 组件中，我们可以使用以下代码来渲染数据：

<template>
  <el-table :data="newData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="hobby1" label="兴趣爱好1"></el-table-column>
    <el-table-column prop="hobby2" label="兴趣爱好2"></el-table-column>
    <el-table-column prop="hobby3" label="兴趣爱好3"></el-table-column>
  </el-table>
</template>

<script>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-ui';

export default {
  components: { ElTable, ElTableColumn },
  setup() {
    const newData = ref([
      {
        name: '张三',
        age: 20,
        hobby1: '看书',
        hobby2: '听音乐',
        hobby3: '打篮球'
      },
      {
        name: '李四',
        age: 22,
        hobby1: '旅游',
        hobby2: '摄影',
        hobby3: '美食'
      }
    ]);

    return {
      newData
    };
  }
};
</script>

三、分多表展示数据

如果我们需要将数据分成多个表格进行展示，我们可以使用 Element UI 的 Tabs 组件。

在 Vue 组件中，我们可以使用以下代码来实现分多表展示数据：

<template>
  <el-tabs>
    <el-tab-pane label="第一个表格">
      <el-table :data="newData1">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="hobby1" label="兴趣爱好1"></el-table-column>
        <el-table-column prop="hobby2" label="兴趣爱好2"></el-table-column>
        <el-table-column prop="hobby3" label="兴趣爱好3"></el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="第二个表格">
      <el-table :data="newData2">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="hobby1" label="兴趣爱好1"></el-table-column>
        <el-table-column prop="hobby2" label="兴趣爱好2"></el-table-column>
        <el-table-column prop="hobby3" label="兴趣爱好3"></el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ref } from 'vue';
import { ElTabs, ElTabPane, ElTable, ElTableColumn } from 'element-ui';

export default {
  components: { ElTabs, ElTabPane, ElTable, ElTableColumn },
  setup() {
    const newData1 = ref([
      {
        name: '张三',
        age: 20,
        hobby1: '看书',
        hobby2: '听音乐',
        hobby3: '打篮球'
      }
    ]);

    const newData2 = ref([
      {
        name: '李四',
        age: 22,
        hobby1: '旅游',
        hobby2: '摄影',
        hobby3: '美食'
      }
    ]);

    return {
      newData1,
      newData2
    };
  }
};
</script>