Vue中,接受到来自后端的对象,给courses: [],赋值 this.courses = res.data.records;,在给<el-table-column prop="credit" label="学分" align="center"></el-table-column>显示时,小数部分不见了,例如3.00,变成了3,怎么解决
时间: 2024-03-26 12:35:26 浏览: 62
Vue中的this.$options.data()和this.$data用法说明
你可以在<el-table-column>标签中设置formatter属性,来格式化表格中的数据。例如,你可以使用toFixed()方法来保留两位小数,如下所示:
```
<el-table-column prop="credit" label="学分" align="center" :formatter="formatCredit"></el-table-column>
...
methods: {
formatCredit(row) {
return row.credit.toFixed(2);
}
}
```
在这个例子中,我们在<el-table-column>标签中添加了formatter属性,并将其绑定到formatCredit方法上。formatCredit方法接收每行数据作为参数,并使用toFixed()方法来保留两位小数。这样,表格中的学分数据就会以保留两位小数的形式显示。
注意:在使用toFixed()方法时,需要注意传入的参数是否为数字类型,否则会报错。如果数据中存在非数字类型的值,可以在formatCredit方法中进行判断和处理。
阅读全文