el-table展示值
时间: 2024-08-15 20:01:01 浏览: 38
改变el-table宽度
5星 · 资源好评率100%
`el-table` 是 Element UI 中的一个表格组件,它用于展示数据列表。在 `el-table` 中显示值通常需要以下几个步骤:
1. **数据准备**:首先,你需要有一个包含你要展示的数据的对象数组,每个对象通常对应表格的一行。例如:
```javascript
const data = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
];
```
2. **表头配置**:在 `<el-table>` 标签中,通过 `columns` 属性定义列的结构,包括字段名和对应的标签:
```html
<el-table :data="data">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
3. **绑定数据**:将数据数组 `data` 绑定到 `v-bind:data` 上面,使其动态更新表格内容。
4. **单元格插槽(slot)**:如果你想要自定义单元格的内容,可以使用 `<template slot-scope="{ row, column, $index }">`,例如,对数字做格式化:
```html
<template slot-scope="{ row, column, $index }">
{{ row.age | filterMethod }}
</template>
```
```
阅读全文