element el-table 中el-table-column 如何得到的数据
时间: 2024-12-25 11:17:27 浏览: 6
在Element UI的`el-table`组件中,`el-table-column`用于定义表格的列,它们通常不会直接获取数据,而是通过`el-table`关联的数据源来显示内容。这个数据源通常是数组格式,每个元素对应表格的一行。
当你创建`el-table-column`时,你可以设置`prop`属性来指定它对应的原生数组对象的属性,也就是从数据数组中提取数据的地方。例如:
```html
<el-table-column
prop="name"
label="姓名">
</el-table-column>
```
在这个例子中,`name`是假设你的数据数组对象有一个名为`name`的属性,`el-table`会动态地将每个数组对象的`name`值展示在这一列。
如果你想获取整个行的数据,可以直接使用`row`变量,它在column的模板内是可用的,例如:
```html
<template slot-scope="scope">
<span>{{ scope.row.age }}</span> - {{ scope.row.name }}
</template>
```
这里`scope.row`就是当前行的完整数据。
如果你需要在组件内部处理数据或者计算,你也可以定义一个`formatter`函数,在该函数里处理数据并返回显示的内容:
```html
<el-table-column
prop="age"
label="年龄"
formatter="formatAge">
</el-table-column>
<script>
export default {
methods: {
formatAge(age) {
return age + "岁";
}
}
}
</script>
```
在这里,`formatAge`函数会在渲染时被调用,传入的是`age`的值。
阅读全文