参考文档：https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1

https://blog.csdn.net/qq_41649755/article/details/106331555?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

项目需求：

从接口中获取数据，渲染显示在表格中，且数据精度保留两位小数。

在element-ui中表格的显示中，插槽的具体使用。

element-ui中作用域插槽

table按照tableData这个数组的长度来生成多少行，按照有多少个el-table-column来生成多少列。

<template slot-scope="scope">

在<el-table-column>中使用自定义模板，实现对渲染数据的改变。

template中自定义列模板，自定义列的显示内容，可组合其他组件使用。

自定义显示的列值

利用scope.row获取该行中dataYoyYear所对应的列值数据，进而进行修改。

拿到数据之后，就要结合vue的过滤器对数据进行修改精度。

HTML中写法

js写法

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

      }

    }