ElementUI：如何使用遍历数据库中的数据

Question

这是我的代码：

<template>
<div>
  <el-table
    ref="multipleTable"
    :data="users">

    <el-table-column
      prop="id"
      label="id">
    </el-table-column>

    <el-table-column
      prop="name"
      label="name">
    </el-table-column>

  </el-table>
</div>
</template>

<script>
export default {
    name:'User',
    data() {
        return{
            users:[],
        }
    },
    
}
</script>

我的数据库有“用户”表，并且有 ID 和名称。我知道使用 v-for="user in users" 来遍历 中的数据，但我不知道如何在中执行此操作

Answer 1

el-table本身就是一个组件，会遍历你内部传递的数据。
您必须将一个对象数组传递给它，因此它会自动迭代它。

请参阅此处的文档示例

Answer 2

例如，您需要这样：

    <template>
<div>
  <el-table
    :data="users"
    style="width: 100%">

    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>

    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>

  </el-table>
</div>
</template>

<script>
export default {
    data() {
        return{
            users: [
                {
                    id: 0,
                    name: 'Name 1'
                },
                {
                    id: 1,
                    name: 'Name 2'
                },
                {
                    id: 2,
                    name: 'Name 3'
                },
                {
                    id: 3,
                    name: 'Name 4'
                },
            ],
        }
    },
    
}
</script>