帮我封装一套vue element-table表格代码
时间: 2023-10-05 22:09:04 浏览: 99
封装Vue Element的table表格组件的示例详解
好的,以下是一个简单的 Vue Element UI 表格组件代码示例:
```vue
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 30, gender: 'Male', address: 'New York' },
{ name: 'Mary', age: 25, gender: 'Female', address: 'Los Angeles' },
{ name: 'Tom', age: 40, gender: 'Male', address: 'Chicago' },
{ name: 'Lisa', age: 35, gender: 'Female', address: 'Houston' },
]
}
},
}
</script>
```
在这个示例中,我们使用了 `el-table` 和 `el-table-column` 组件来创建一个表格。`tableData` 是一个数组,用于存储表格数据。`el-table-column` 组件的 `prop` 属性用于指定数据中对应的字段名,`label` 属性用于指定列名。
你可以根据自己的需要修改此示例中的数据和列定义。同时,Element UI 还提供了很多其他的表格属性和方法,你可以查看官方文档来了解更多信息。
阅读全文