Vue2 + ElementUI 实现简单列表：姓名、年龄、手机号、爱好

<template>
  <div>
    <el-table :data='tableData' style='width: 100%'>
      <el-table-column prop='name' label='姓名'></el-table-column>
      <el-table-column prop='age' label='年龄'></el-table-column>
      <el-table-column prop='phone' label='手机号'></el-table-column>
      <el-table-column prop='hobby' label='爱好'></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          phone: '13888888888',
          hobby: '篮球'
        },
        {
          name: '李四',
          age: 25,
          phone: '13999999999',
          hobby: '足球'
        },
        {
          name: '王五',
          age: 30,
          phone: '13666666666',
          hobby: '游泳'
        }
      ]
    }
  }
}
</script>
<p>这段代码中，我们使用了 ElementUI 提供的 <code>el-table</code> 和 <code>el-table-column</code> 组件来实现表格的展示。<code>el-table</code> 组件的 <code>data</code> 属性绑定了一个数组，表示表格的数据源，<code>el-table-column</code> 组件的 <code>prop</code> 属性指定了要显示的数据字段，<code>label</code> 属性指定了表头的标题。通过这些配置，我们就可以展示一个简单的列表了。</p>