以下是一个简单的示例代码:

<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>

这段代码中,我们使用了 ElementUI 提供的 el-tableel-table-column 组件来实现表格的展示。el-table 组件的 data 属性绑定了一个数组,表示表格的数据源,el-table-column 组件的 prop 属性指定了要显示的数据字段,label 属性指定了表头的标题。通过这些配置,我们就可以展示一个简单的列表了。

用 vue2 + elementUI 帮我实现一个列表 表头有 姓名年龄手机号爱好

原文地址: http://www.cveoy.top/t/topic/b2Cm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录