el-table-column显示内容替换
时间: 2023-10-24 10:22:29 浏览: 195
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
要替换el-table-column的显示内容,可以使用scoped slot或formatter属性。
1. Scoped slot
使用scoped slot,可以自定义列中的内容。在el-table-column中添加一个scoped slot,然后在template中编写内容。
例如,要将一个列中的数字值转换为货币格式:
```html
<el-table-column label="Price">
<template slot-scope="scope">
{{ '$' + scope.row.price.toFixed(2) }}
</template>
</el-table-column>
```
2. Formatter属性
formatter属性可以接受一个函数,该函数将列中的每个单元格的内容作为参数,并返回格式化后的内容。例如:
```html
<el-table-column label="Price" :formatter="formatPrice"></el-table-column>
```
```js
methods: {
formatPrice(price) {
return '$' + price.toFixed(2);
}
}
```
以上两种方式都可以实现替换el-table-column的显示内容。具体使用哪种方式取决于需要实现的具体功能。
阅读全文