el-table formatter 的使用
时间: 2024-09-09 19:11:55 浏览: 31
`el-table formatter` 是 Element UI 框架中用于自定义表格列显示内容的属性。通过使用 formatter,你可以对表格的某一个列进行特定格式化处理,比如改变显示的文本样式、添加图标、拼接字符串、条件显示不同的内容等等。
一个基本的 `formatter` 的使用方法如下:
1. 在 `el-table` 的列定义中指定 `formatter` 属性。
2. 将 `formatter` 属性设置为一个函数,该函数接收三个参数:当前行数据 `row`,当前列数据 `column`,以及当前单元格的索引 `index`。
3. 在该函数中编写你的格式化逻辑,并返回你希望在表格中显示的值。
下面是一个简单的例子,假设有一个用户数据表格,你想根据用户的年龄来决定显示的是“年轻”、“中年”还是“老年”:
```html
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180">
<template slot-scope="scope">
<span>{{ formatAge(scope.row.age) }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
age: 28
}, {
date: '2016-05-04',
name: '张小刚',
age: 32
}, {
date: '2016-05-01',
name: '李小红',
age: 55
}]
};
},
methods: {
formatAge(age) {
if (age < 30) {
return '年轻';
} else if (age >= 30 && age <= 50) {
return '中年';
} else {
return '老年';
}
}
}
};
</script>
```