Vue动态扩展表头的表格及数据方式(数组嵌套对象)

下面我会详细讲解“Vue动态扩展表头的表格及数据方式(数组嵌套对象)”的完整攻略。

介绍

在Vue框架中，我们经常需要用到表格组件。而有些情况下，我们需要动态扩展表格的表头，并且表格数据是数组嵌套对象的形式。这时，我们需要采用一定的技巧来实现这一功能。

实现步骤

安装依赖

首先，我们需要安装element-ui组件库，以及vue-router和axios等常用工具。可以使用以下命令进行安装：

npm install --save element-ui vue-router axios

设计数据结构

接着，我们需要设计表格数据的数据结构。在本次示例中，我们将使用如下数据结构：

tableData: [
  { name: '张三', age: 18, sex: '男', address: '北京市朝阳区', hobbies: ['游泳'] },
  { name: '李四', age: 22, sex: '女', address: '上海市浦东区', hobbies: ['读书'] }
],
tableColumns: [
  { label: '姓名', key: 'name'},
  { label: '年龄', key: 'age'},
  { label: '性别', key: 'sex'},
  { label: '地址', key: 'address'},
  { label: '爱好', key: 'hobbies'}
]

其中，tableData为表格数据，每一行为一个对象。tableColumns为表头数据，每一列为一个对象，包含label和key两个属性。

创建表格组件

接下来，我们需要创建表格组件Table.vue。在组件中，我们需要引入element-ui表格组件，以及tableData和tableColumns数据。在mounted生命周期中，我们需要从后台获取表格数据，并更新tableData数据。

<template>
  <div class="table-container">
    <el-table :data="tableData">
      <el-table-column v-for="column in tableColumns" :key="column.key" :label="column.label">
        <template v-if="column.key === 'hobbies'">
          <span v-for="(item, index) in column.hobbies" :key="index">{{ item }}</span>
        </template>
        <template v-else>
          {{ scope.row[column.key] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [
        { label: '姓名', key: 'name'},
        { label: '年龄', key: 'age'},
        { label: '性别', key: 'sex'},
        { label: '地址', key: 'address'},
        { label: '爱好', key: 'hobbies'}
      ]
    };
  },
  mounted() {
    axios
      .get('/api/getTableData')
      .then(res => {
        this.tableData = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

在以上代码中，我们使用了el-table、el-table-column和template等组件，并根据tableColumns动态显示表头列，并根据每个对象的key来展示对应的数据。

扩展表头列

在实际开发中，我们经常需要动态扩展表头列。比如，我们需要在表格中新增一列学历，并且只有年龄大于18岁的才显示该列。

在tableColumns中增加一列属性即可：

{ label: '学历', key: 'education', show: (row) => row.age > 18 }

其中，show属性表示该列是否显示。我们需要在创建表头列时，判断该列是否需要显示：

<el-table-column v-for="column in tableColumns" :key="column.key" :label="column.label" v-if="column.show ? column.show(scope.row) : true">

在以上代码中，我们使用了v-if指令来控制表头的显示。

示例

为了更好的帮助理解，我们来看一个完整的代码示例。假设我们需要创建一个人员表格，包含姓名、年龄、性别、地址、爱好和学历。其中，学历列只有年龄大于18岁的才会显示。后台API返回的数据结构如下：

{
  "code": 0,
  "data": [
    {
      "name": "张三",
      "age": 18,
      "sex": "男",
      "address": "北京市朝阳区",
      "hobbies": ["游泳"],
      "education": "高中"
    },
    {
      "name": "李四",
      "age": 22,
      "sex": "女",
      "address": "上海市浦东区",
      "hobbies": ["读书"],
      "education": "本科"
    }
  ]
}

代码实现如下：

<template>
  <div class="table-container">
    <el-table :data="tableData">
      <el-table-column v-for="column in tableColumns" :key="column.key" :label="column.label" v-if="column.show ? column.show(scope.row) : true">
        <template v-if="column.key === 'hobbies'">
          <span v-for="(item, index) in scope.row[column.key]" :key="index">{{ item }}</span>
        </template>
        <template v-else>
          {{ scope.row[column.key] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [
        { label: '姓名', key: 'name', show: true },
        { label: '年龄', key: 'age', show: true },
        { label: '性别', key: 'sex', show: true },
        { label: '地址', key: 'address', show: true },
        { label: '爱好', key: 'hobbies', show: true },
        { label: '学历', key: 'education', show: (row) => row.age > 18 }
      ]
    };
  },
  mounted() {
    axios
      .get('/api/getTableData')
      .then(res => {
        this.tableData = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

以上代码实现了对数据的获取和表格的创建，同时实现了按照年龄大小来动态显示表头列的需求。

总结

本文讲解了如何在Vue框架中，实现动态扩展表头的表格及数据方式(数组嵌套对象)。通过上述步骤，我们可以灵活使用表格组件，并且实现符合实际需求的功能。