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

发布时间：2022-04-27 10:01:51 作者：iii
来源：亿速云阅读：921

Vue怎么使用el-table遍历循环表头和表体数据

在Vue.js开发中，Element UI是一个非常流行的UI组件库，其中的el-table组件常用于展示表格数据。在实际开发中，我们经常需要动态生成表头和表体数据，这时就需要使用v-for指令来遍历循环表头和表体数据。本文将详细介绍如何在Vue中使用el-table遍历循环表头和表体数据。

1. 基本用法

首先，我们需要在Vue项目中引入Element UI库，并注册el-table组件。假设我们已经完成了这些步骤，接下来我们将通过一个简单的例子来展示如何使用el-table遍历循环表头和表体数据。

1.1 静态表头和表体数据

在开始动态生成表头和表体数据之前，我们先来看一个静态的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '广州市天河区'
        }
      ]
    };
  }
};
</script>

在这个例子中，我们使用了静态的表头和表体数据。表头由el-table-column组件定义，表体数据由tableData数组提供。

1.2 动态生成表头和表体数据

在实际开发中，表头和表体数据往往是动态生成的。我们可以通过v-for指令来遍历生成表头和表体数据。

1.2.1 动态生成表头

假设我们有一个表头数据数组tableHeaders，我们可以通过v-for指令来动态生成表头：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="header in tableHeaders"
      :key="header.prop"
      :prop="header.prop"
      :label="header.label"
      :width="header.width"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableHeaders: [
        { prop: 'date', label: '日期', width: '180' },
        { prop: 'name', label: '姓名', width: '180' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '广州市天河区'
        }
      ]
    };
  }
};
</script>

在这个例子中，我们通过v-for指令遍历tableHeaders数组，动态生成表头。每个el-table-column组件的prop、label和width属性都从tableHeaders数组中获取。

1.2.2 动态生成表体数据

表体数据的生成方式与表头类似。我们可以通过v-for指令遍历tableData数组，动态生成表体数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="header in tableHeaders"
      :key="header.prop"
      :prop="header.prop"
      :label="header.label"
      :width="header.width"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableHeaders: [
        { prop: 'date', label: '日期', width: '180' },
        { prop: 'name', label: '姓名', width: '180' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '广州市天河区'
        }
      ]
    };
  }
};
</script>

在这个例子中，el-table组件的data属性绑定了tableData数组，el-table会自动遍历tableData数组，生成表体数据。

2. 复杂表头和表体数据

在实际开发中，表头和表体数据可能会更加复杂。例如，表头可能包含嵌套的表头，表体数据可能包含嵌套的对象。我们可以通过递归的方式来处理这些复杂的情况。

2.1 嵌套表头

假设我们有一个嵌套的表头数据数组nestedTableHeaders，我们可以通过递归的方式生成嵌套的表头：

<template>
  <el-table :data="tableData" style="width: 100%">
    <template v-for="header in nestedTableHeaders" :key="header.label">
      <el-table-column
        v-if="!header.children"
        :prop="header.prop"
        :label="header.label"
        :width="header.width"
      ></el-table-column>
      <el-table-column
        v-else
        :label="header.label"
        :width="header.width"
      >
        <template v-for="childHeader in header.children" :key="childHeader.label">
          <el-table-column
            :prop="childHeader.prop"
            :label="childHeader.label"
            :width="childHeader.width"
          ></el-table-column>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      nestedTableHeaders: [
        {
          label: '日期',
          prop: 'date',
          width: '180'
        },
        {
          label: '用户信息',
          children: [
            {
              label: '姓名',
              prop: 'name',
              width: '180'
            },
            {
              label: '地址',
              prop: 'address'
            }
          ]
        }
      ],
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '广州市天河区'
        }
      ]
    };
  }
};
</script>

在这个例子中，我们通过递归的方式处理嵌套的表头数据。如果表头数据中包含children属性，则递归生成嵌套的表头。

2.2 嵌套表体数据

如果表体数据中包含嵌套的对象，我们可以通过scoped slot来处理这些嵌套的数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="header in tableHeaders"
      :key="header.prop"
      :prop="header.prop"
      :label="header.label"
      :width="header.width"
    >
      <template v-slot="{ row }">
        <span v-if="header.prop === 'address'">{{ row.address.city }} {{ row.address.street }}</span>
        <span v-else>{{ row[header.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableHeaders: [
        { prop: 'date', label: '日期', width: '180' },
        { prop: 'name', label: '姓名', width: '180' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: {
            city: '北京市',
            street: '朝阳区'
          }
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: {
            city: '上海市',
            street: '浦东新区'
          }
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: {
            city: '广州市',
            street: '天河区'
          }
        }
      ]
    };
  }
};
</script>

在这个例子中，我们通过scoped slot来处理嵌套的表体数据。如果header.prop为address，则显示嵌套的city和street属性。

3. 总结

在Vue.js开发中，使用el-table遍历循环表头和表体数据是非常常见的需求。通过v-for指令，我们可以轻松地动态生成表头和表体数据。对于复杂的表头和表体数据，我们可以通过递归和scoped slot来处理。希望本文能帮助你更好地理解和使用el-table组件。