指令 v-for 在表格中的嵌套使用

news2025/10/27 22:02:16

<template>
        <form>
            姓名：<input type="text">
            邮箱：<input type="text">
            <button>搜索</button>
        </form>
        
        <table style="text-align: center;">
            <thead >
                <tr>
                    <th v-for="(item,index) in tableConfig" :key="index">
                        {{ item.title }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr  v-for="(item,index) in dataSource" :key="index">
                    <td v-for="(tableConfigItem,index) in tableConfig" :key="index">
                        {{item[tableConfigItem.dataIndex]  }}
                    </td>
                </tr>
            </tbody>
        </table>
</template>
    
<script setup>
import { ref } from 'vue';
import { getUserList } from '../service/users';

const tableConfig = [
    { title: 'id', dataIndex: 'id' },
    { title: '姓名', dataIndex: 'username' },
    { title: '邮箱', dataIndex: 'email'},
]
const dataSource = ref([])
const getData = async () => {
    const res = await getUserList();
    dataSource.value = res.data.data.record;
};
getData();
</script>
    
<style>
    
</style>

整体流程：

1.表格配置 tableConfig：

定义了一个 tableConfig 数组，它包含了表格的列配置。每个对象都有两个属性：（自定义）

title: 列的标题
dataIndex: 用于从数据源中提取相应数据的键

const tableConfig = [
    { title: 'id', dataIndex: 'id' },
    { title: '姓名', dataIndex: 'username' },
    { title: '邮箱', dataIndex: 'email'},
]

2. 渲染表头：

在表头部分，使用了 v-for 来遍历 tableConfig 数组，以动态生成每一列的标题。

<th v-for="(item, index) in tableConfig" :key="index">
    {{ item.title }}
</th>

{{ item.title }}: 这里使用插值语法显示每个列的标题。

3.渲染数据行：

<tr v-for="(item, index) in dataSource" :key="index">
    <td v-for="(tableConfigItem, index) in tableConfig" :key="index">
        {{ item[tableConfigItem.dataIndex] }}
    </td>
</tr>

外层 v-for：v-for="(item, index) in dataSource" 遍历 dataSource 数组，每个 item 代表一行数据（即一个用户对象），index 是行的索引。
内层 v-for：在每一行中，您又遍历 tableConfig 数组，v-for="(tableConfigItem, index) in tableConfig"。这里的 tableConfigItem 是当前列的配置对象，index 是列的索引。
数据提取： {{ item[tableConfigItem.dataIndex] }} 使用了动态属性访问的方式，从当前行的数据 item 中提取出对应列的数据。tableConfigItem.dataIndex 会返回 id、username 或 email，从而提取到相应的值。