用vue和elementui写一个列表展示?
时间: 2024-04-29 12:22:53 浏览: 117
首先你需要安装 Vue 和 ElementUI。
然后,创建一个 Vue 组件,使用 ElementUI 的 Table 组件来展示列表数据。
示例代码如下:
```html
<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="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import { Table } from 'element-ui'
export default {
components: {
[Table.name]: Table
},
data() {
return {
tableData: [
{ name: '张三', age: 20, address: '北京市' },
{ name: '李四', age: 25, address: '上海市' },
{ name: '王五', age: 30, address: '广州市' },
{ name: '赵六', age: 35, address: '深圳市' }
]
}
}
}
</script>
```
在上面的代码中,我们使用了 ElementUI 的 Table 组件来展示列表数据。我们通过传递一个数组 `tableData` 给 `:data` 属性来渲染表格数据。表格的列可以通过 `el-table-column` 组件来定义,我们这里定义了三列 `name`、`age` 和 `address`。
最后,在组件中导入 Table 组件并将其注册为局部组件。在 `data` 中定义 `tableData` 数组来存储表格数据。
阅读全文