【需求】在element中，将表格中的数据进行处理，然后渲染出来。例如，将数据保留小数点后两位显示。

【知识点】formatter:用来格式化内容

【分析】在element 的table中，实现的过程是，数据需要绑定在 :data=”tableData” 中，然后通过prop读取tableData中的key,这样一列的数据即可显示出来。现在需要对返回的数据进行格式化，可以用formatter属性，例如在“手续费”中，需要对数据进行保留两位小数，通过调用handelFix函数。

注：这里在handelFix函数中，要通过传入property获得当前那一列的prop值，不然获取不到值。


template

<el-table       :data="tableData"
                stripe
                empty-text
                v-loading="listLoading"
                element-loading-text="拼命加载中"
                style="width: 100%">

                 <el-table-column
                         :formatter="handelFix"
                  prop="fuwufei"
                  label="手续费">
                </el-table-column>
                <el-table-column
                  prop="zhuangtai"
                  label="状态" width="160">
                </el-table-column>
                <el-table-column
                  prop="zizhuangtai"
                  label="子状态" width="160">
                </el-table-column>
                 <el-table-column
                  prop="shenheren"
                  label="审核人">
                </el-table-column>
                <el-table-column
                  label="备注">
                  <template scope="custom">
                    <el-button type="text" @click="open(custom.row.userId)">详情</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="" fixed="right" width=\'150\' label="操作">
                    <template scope="scope">
                        <router-link :to="{ path: \'actionRecord\', query: { gnhid: \'5905d474b74e756d40b6a7a7\' }}"><el-button type="warning" size=\'mini\'>操作记录</el-button></router-link>
                        <router-link :to="{ path: \'newPage\', query: { userId: scope.row.userId,gnhId:\'\'}}" v-show="!zhijianIsShow"><el-button type="success" size=\'mini\' >新页面</el-button></router-link>

                        <router-link :to="{ path: \'newPageZhijian\', query: { userId:\'\',gnhId: scope.row.id }}" v-show="zhijianIsShow"><el-button type="success" size=\'mini\' @click="">质检页面</el-button></router-link>
                    </template>
                </el-table-column>
              </el-table>

script

 handelFix(row, column){
    return row[column.property].toFixed(2)
},

 

版权声明：本文为xiaoli52qd原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xiaoli52qd/p/7516716.html?ivk_sa=1024320u