用vue.component高效渲染表格数据

本文将讲解如何利用Vue.component创建高效的表格组件，并解决数据渲染问题。 您可能已经尝试使用Vue.component()创建名为each-list的自定义组件，该组件包含编号、人员和属性三个单元格。然而，直接在父组件中使用v-for迭代数据，并在每个迭代中实例化each-list组件，会导致每个组件都只渲染第一行数据。

正确的做法是在each-list组件内部使用v-for指令处理数据。 关键在于将数据作为props传递给each-list组件。

改进后的代码如下：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

<template>
  <div v-for="row in rows" :key="row.id">
    <each-list :row="row"></each-list>
  </div>
</template>

在父组件中，我们使用v-for迭代数据数组rows，并为每一行数据创建一个each-list组件实例。 :row="row" 将当前行数据作为row属性传递给each-list组件。 请注意添加了:key属性，这对于Vue的虚拟DOM高效更新至关重要。

立即学习“前端免费学习笔记（深入）”；

通过这种方式，每个each-list组件都会接收到正确的数据，从而实现表格数据的正确渲染。 确保each-list组件内部正确地访问和使用row属性来显示数据。