用 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>
这段代码中,我们使用了 ElementUI 提供的 el-table
和 el-table-column
组件来实现表格的展示。el-table
组件的 data
属性绑定了一个数组,表示表格的数据源,el-table-column
组件的 prop
属性指定了要显示的数据字段,label
属性指定了表头的标题。通过这些配置,我们就可以展示一个简单的列表了。
原文地址: http://www.cveoy.top/t/topic/b2Cm 著作权归作者所有。请勿转载和采集!