<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
name: 'Jack',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
name: 'Steve',
address: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
name: 'Morgan',
address: 'No. 189, Grove St, Los Angeles'
}
]
};
}
};
</script>
<style scoped>
/* 样式可以根据需要自行添加 */
</style>
模板部分 (<template>
):
el-table
组件来展示表格数据。:data="tableData"
将 tableData
数据绑定到表格中。el-table-column
定义了表格的列,prop
属性指定了对应的数据字段,label
是列标题。脚本部分 (<script>
):
data()
方法返回一个对象,其中包含表格的数据 tableData
。每个对象代表一行数据,包括 date
、name
和 address
字段。样式部分 (<style scoped>
):
这个示例展示了如何使用 Vue 和 Element UI 的 el-table
组件来创建一个简单的表格,并绑定数据。
上一篇:vue动画
下一篇:vue判断字符串是否为空
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站