elementUi 組件--el-table

【需求】在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)
},