vue如何使用el-table遍历循环表头和表体数据

当我们需要在Vue项目中显示表格数据时，我们可以使用 Element UI 提供的 el-table 组件。在使用 el-table 组件时，经常会遇到需要遍历循环表头和表体数据的情况。下面是详细的步骤：

1. 安装 Element UI

首先，我们需要安装 Element UI。打开终端并运行以下命令：

npm install element-ui --save

2. 引入 Element UI

在项目入口文件（通常是 main.js）中引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3. 创建 el-table 组件

在 Vue 组件中，我们可以创建一个 el-table 组件，并将表头和表体数据存放在 data 属性中：

<template>
  <el-table :data="tableData" border>
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableColumns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '地址', prop: 'address' }
      ],
      tableData: [
        { name: '小明', age: 20, address: '北京市朝阳区' },
        { name: '小红', age: 22, address: '上海市黄浦区' },
        { name: '小刚', age: 19, address: '深圳市南山区' }
      ]
    }
  }
}
</script>

在上面的代码中，el-table 组件包含两个属性：data 和 border。data 属性指定表体数据，border 属性指定是否显示表格边框。

通过 v-for 循环遍历 tableColumns 数组，动态创建表头。在创建 el-table-column 组件时，使用 :prop 和 :label 绑定属性和标签文本，:key 绑定行的唯一标识。

4. 创建动态表头和表体数据

如果需要根据数据动态创建表头和表体数据，可以将数据存放在父组件中，并通过 props 属性传递给子组件。在父组件中，可以动态生成表头和表体数据，传递给子组件：

<template>
  <table-component :columns="columns" :data="data"></table-component>
</template>

<script>
import TableComponent from './TableComponent.vue'
export default {
  components: {
    TableComponent
  },
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '地址', prop: 'address' }
      ],
      data: [
        { name: '小明', age: 20, address: '北京市朝阳区' },
        { name: '小红', age: 22, address: '上海市黄浦区' },
        { name: '小刚', age: 19, address: '深圳市南山区' }
      ]
    }
  }
}
</script>

在上面的代码中，父组件通过 :columns 和 :data 属性分别传递表头和表体数据给子组件。

在子组件中，我们通过 props 接收数据，并动态生成表头和表体数据：

<template>
  <el-table :data="tableData" border>
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ['columns', 'data'],
  computed: {
    tableColumns() {
      return this.columns.map(column => ({
        prop: column.prop,
        label: column.label
      }))
    },
    tableData() {
      return this.data.map(item => ({
        name: item.name,
        age: item.age,
        address: item.address
      }))
    }
  }
}
</script>

在上面的代码中，我们通过 computed 属性动态生成表头和表体数据。通过 map 函数遍历 columns 和 data 数组，生成表头和表体数据。

至此，我们已经学习了如何使用 el-table 组件遍历循环表头和表体数据的完整攻略。