vue：遇到的坑之-----格式化子表数据（不是主表）

 这是一个双层嵌套的表格-0-

<el-table :data="TableList" border>
    // 主表展开按钮
   <el-table-column type="expand">
       <template slot-scope="props">
           // 嵌套的子表
          <el-table :data="subTableList" border>
              //子表要过滤的数据
             <el-table-column prop="money" label="金额">
                <template slot-scope="scope">
                    {{ scope.row.money| moneyFilter }}
                </template>
             </el-table-column>
          </el-table>
       </template>
    </el-table-column>
    // 主表要过滤的数据
    <el-table-column prop="moneyType" label="金额类型">
        <template slot-scope="scope">
            {{ scope.row.moneyType| moneyTypeFilter }}
        </template>
    </el-table-column>
</el-table>

 然后下面的是通过过滤器来写的，然后发现过滤器只能对主表的数据进行过滤，对子表的数据没有效果 （现在也不知道为什么会对子表数据无效，不知道是不是过滤器的触发机制和子表渲染数据的时候出现了矛盾）

//金额类型过滤器
Vue.filter('moneyTypeFilter', (input) => {
    let moneyType = ''
    switch (input) {
        case 'money':
            moneyType = '固定金额'
            break
        case 'scale':
            moneyType = '流动金额'
            break
        default: moneyType = "无"
    }
    return moneyType 
})

//金额过滤器
Vue.filter('moneyFilter', (input) => {
    if (!input) return "0.00";
    return input.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
})

 然后纠结了好久，终于在element-ui文档里发现了表格的一个属性！！formatter！我原来这么就没发现这个宝贝属性呢qwq

于是我个子表的行添加了这个属性 ，然后封装了一个函数，方便多次用到

<el-table-column :formatter="formatterNum" > </el-table-column>

// 格式化金额的封装函数
    formatterNum(row, column, value) {
      if (!value) return "0.00";
      return value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
    }

 然后就完美解决了！！！

ps：一个大佬说还可以通过computed计算属性来解决：把filter放到computed里面，这样每次变化的时候都可以进行过滤处理，但是我比较菜。。现在还没弄透computed，所以这里也就没有写，然后贴上这位大佬发给我参考的链接：https://stackoverflow.com/a/47774277/1337961，希望可以帮助到大家

 

有问题欢迎指出=3=