如何获取el-table列的数据
时间: 2023-10-18 14:14:21 浏览: 44
要获取 el-table 列的数据,可以使用 $refs 属性获取到 el-table 组件的实例,并通过该实例的 $refs 属性获取到 el-table-column 组件的实例,从而获取到该列的数据。以下是一个示例代码:
```html
<template>
<div>
<el-table :data="tableData" ref="table">
<el-table-column prop="name" label="姓名" ref="nameColumn"></el-table-column>
<el-table-column prop="age" label="年龄" ref="ageColumn"></el-table-column>
<el-table-column prop="address" label="地址" ref="addressColumn"></el-table-column>
</el-table>
<el-button type="primary" @click="getColumnData">获取数据</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' }
]
};
},
methods: {
// 获取列的数据
getColumnData() {
// 获取 el-table 的实例
const table = this.$refs.table;
// 获取 el-table-column 的实例
const nameColumn = table.$refs.nameColumn;
const ageColumn = table.$refs.ageColumn;
const addressColumn = table.$refs.addressColumn;
// 获取列的数据
const nameData = nameColumn.filteredValue || nameColumn.value;
const ageData = ageColumn.filteredValue || ageColumn.value;
const addressData = addressColumn.filteredValue || addressColumn.value;
console.log('姓名列的数据:', nameData);
console.log('年龄列的数据:', ageData);
console.log('地址列的数据:', addressData);
}
}
};
</script>
```
在上述代码中,我们使用了 $refs 属性获取到 el-table 和 el-table-column 的实例,并通过实例的 value 属性获取到列的数据。注意,由于 el-table-column 组件支持筛选功能,value 属性可能会被 filteredValue 属性覆盖,因此需要先判断 filteredValue 是否存在,如果存在则使用 filteredValue。