el table column 插槽数据千分位分割 保留两位小数
时间: 2023-12-10 22:43:12 浏览: 421
您可以使用 `formatter` 属性来格式化 el-table 的列数据,并使用 JavaScript 的 `toLocaleString()` 方法来实现千分位分割和保留两位小数。
下面是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column prop="price" label="价格" :formatter="formatPrice"></el-table-column>
</el-table>
```
```javascript
data() {
return {
tableData: [
{ name: '商品A', price: 12345.6789 },
{ name: '商品B', price: 98765.4321 }
]
};
},
methods: {
formatPrice(row, column) {
const price = parseFloat(row[column.property]);
return price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
}
```
在上述代码中,我们通过 `formatter` 属性将 `formatPrice` 方法应用到 el-table-column 中的 prop 属性为 "price" 的列上。`formatPrice` 方法接收当前行数据和当前列的信息作为参数,然后将价格转换为浮点数并使用 `toLocaleString()` 方法进行格式化,指定保留两位小数。
这样,在表格中显示的价格将会以千分位分割,并且保留两位小数。
阅读全文