ElementUI 使用Table组件,绘制一个二维表格
在使用ElementUI的Table组件绘制二维表格时,你需要定义表格的数据源和列信息。以下是一个简单的例子:
<template>
<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>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
// ... 更多数据
]
};
}
};
</script>
在这个例子中,el-table
是表格的容器,el-table-column
用来定义每一列的数据和显示的标签。data
属性绑定到 tableData
,它是一个包含对象的数组,每个对象代表一行数据,对象的属性(如 date
、name
和 address
)与 el-table-column
的 prop
属性对应,以此来展示数据。
评论已关闭