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="拼命加载中"
>
<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
elementui登录界面
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="w.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: w.userId,gnhId:''}}" v-show="!zhijianIsShow"><el-button type="success" size='mini' >新页⾯</el-button></router-link>
<router-link :to="{ path: 'newPageZhijian', query: { userId:'',gnhId: w.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)
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。