el-table的实例
时间: 2024-05-31 12:05:28 浏览: 152
el-table 是一款基于 Element UI 的表格组件,可以方便地实现表格的展示、筛选、排序、分页等功能。以下是一个 el-table 的简单实例:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2021-05-01',
name: '张三',
address: '北京市朝阳区'
},
{
date: '2021-05-02',
name: '李四',
address: '上海市浦东新区'
},
{
date: '2021-05-03',
name: '王五',
address: '广州市天河区'
},
{
date: '2021-05-04',
name: '赵六',
address: '深圳市南山区'
}
]
}
}
}
</script>
```
以上实例中,el-table 组件的 data 属性绑定了一个 tableData 数组,数组中每一项代表表格中的一行数据。el-table-column 组件的 prop 属性绑定了 tableData 中的属性名,label 属性定义了表头的名称。你可以根据实际需求,自定义 el-table 的列数、列宽度、分页等属性。