获取elementui表格某一列数据
时间: 2023-09-18 17:14:01 浏览: 333
vue2+elementui 实现table表格列分割
3星 · 编辑精心推荐
如果你需要获取 ElementUI 表格中的某一列数据,可以按照以下步骤进行操作:
1. 给 `<el-table-column>` 标签绑定 `prop` 属性,该属性的值为该列数据在表格数据源中对应的属性名称。
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
2. 在方法中使用 `map` 函数获取表格数据源中的指定属性的值组成的数组。
```javascript
methods: {
getColumnData(prop) {
return this.tableData.map(item => item[prop]);
}
}
```
其中,`getColumnData` 方法接受一个参数 `prop`,表示需要获取的表格列对应的属性名称。
3. 在模板中调用 `getColumnData` 方法,传入需要获取的列对应的 `prop` 值即可获取该列数据的数组。
```html
<template>
<div>
<div>姓名:{{ getColumnData('name').join(', ') }}</div>
<div>年龄:{{ getColumnData('age').join(', ') }}</div>
</div>
</template>
```
以上代码仅供参考,具体实现方式可能因项目而异。
阅读全文