vue el-table画表格
时间: 2024-01-03 21:22:45 浏览: 154
以下是使用Vue和Element UI的el-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="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>
```
这段代码使用了Vue的单文件组件的写法,通过el-table组件来创建一个表格。在data中定义了一个tableData数组,数组中的每个对象代表表格中的一行数据。el-table-column组件用来定义表格的列,通过prop属性指定对应的数据字段,label属性指定列的标题。
你可以根据自己的需求修改表格的数据和列的定义,以及添加其他的功能和样式。
阅读全文