参考文档:https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1
项目需求:
从接口中获取数据,渲染显示在表格中,且数据精度保留两位小数。
在element-ui中表格的显示中,插槽的具体使用。
table按照tableData这个数组的长度来生成多少行,按照有多少个el-table-column来生成多少列。
<template slot-scope="scope">
在<el-table-column>中使用自定义模板,实现对渲染数据的改变。
template中自定义列模板,自定义列的显示内容,可组合其他组件使用。
利用scope.row获取该行中dataYoyYear所对应的列值数据,进而进行修改。
拿到数据之后,就要结合vue的过滤器对数据进行修改精度。
mention!此时的filters方法,而不是filter。important:该方法与methods并列,否则报错!
filters: {
capitalize: function (value) {
let val = ''
if (!isNaN(value) && value != '' && value != null) {
if (value % 1 == 0 && value != 0) { //整数
val = value + ".00"
} else if (value == 0) {
val = ''
} else { //小数
val = parseFloat(value).toFixed(2)
}
} else {
val = '0.00'
}
return val
}
}