參考文檔: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
??????}
????}