element ui 静态数据表格
时间: 2023-12-27 17:25:15 浏览: 156
静态Html、jsp、php等使用element ui最简单直观例子(含table/对话框服及js/css等)
以下是使用Element UI创建静态数据表格的示例:
```html
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
]
};
}
};
</script>
```
在上面的示例中,我们使用了`el-table`组件来创建表格,并使用`el-table-column`组件定义表格的列。通过`prop`属性指定了每列对应的数据字段,通过`label`属性设置列的标题。
静态数据通过`tableData`数组传递给表格组件,每个对象代表一行数据,对象的属性对应表格的列。
你可以根据自己的需求修改表格的列和数据。
阅读全文