vue在el-table-column中实现转码操作
时间: 2023-10-28 19:57:06 浏览: 93
vue实现扫码功能
5星 · 资源好评率100%
在 `el-table` 中使用 `el-table-column` 组件渲染表格列时,可以通过 `formatter` 属性实现转码操作。
例如,如果要在表格中显示一个数字,并将其转换为金额格式,可以使用以下代码:
```html
<el-table :data="tableData">
<el-table-column prop="price" label="价格" :formatter="formatPrice"></el-table-column>
</el-table>
```
在 `el-table-column` 上设置了 `formatter` 属性,并将其指向了一个名为 `formatPrice` 的方法。
然后在 Vue 实例中定义 `formatPrice` 方法,用于将数值转换为金额格式:
```javascript
methods: {
formatPrice(row, column, cellValue) {
return '¥' + cellValue.toFixed(2);
}
}
```
在 `formatPrice` 方法中,第一个参数是当前行的数据对象,第二个参数是当前列的配置对象,第三个参数是当前单元格的值。
在上面的代码中,我们将单元格的值转换为金额格式,并在前面添加了人民币符号。
通过这种方式,我们可以在渲染表格时对数据进行转码操作。
阅读全文