vue+elementUI 后台数据为数字，前台转化成对应的中文

╰+攻爆jí腚メ 2021-12-17 05:23 998阅读 0赞

# html/js代码 #

**重点：给每一列绑定属性formatter,值为一个函数，返回要翻译成的中文字符串**

<el-table :data="djmxListData" stripe @row-click="rowClick" highlight-current-row style="width: 100%">
                        <el-table-column prop="djfl" :formatter="getDJFLMC" label="电价分类">
                        </el-table-column>
                        <el-table-column prop="ydlb" :formatter="getYDLBMC" label="用电类别">
                        </el-table-column>
                        <el-table-column prop="jfdy" :formatter="getJFDYMC" label="计费电压">
                        </el-table-column>
                        <el-table-column prop="djlb" :formatter="getDJLBMC" label="电价类别">
                        </el-table-column>
                        <el-table-column prop="fklx" :formatter="getFKLXMC" label="丰枯类型">
                        </el-table-column>
                        <el-table-column prop="glbz" :formatter="getGLBZMC" label="归类标志">
                        </el-table-column>
    </el-table>
    <script> export default { name: "index", methods:{ getDJFLMC(row,col){ 有多少条数据，此函数就会触发多少次。 djfl是电价分类数组（里面的字段有：分类的编号dmbh；对应编号的分类名称dmnr） for (var i in this.djfl) { if (this.djfl[i].dmbh==row.djfl){ return this.djfl[i].dmnr } } }, getYDLBMC(row,col){ for (var i in this.ydlb) { if (this.ydlb[i].dmbh==row.ydlb){ return this.ydlb[i].dmnr } } }, getJFDYMC(row,col){ for (var i in this.jfdy) { if (this.jfdy[i].dmbh==row.jfdy){ return this.jfdy[i].dmnr } } }, getDJLBMC(row,col){ for (var i in this.djlb) { if (this.djlb[i].dmbh==row.djlb){ return this.djlb[i].dmnr } } }, getFKLXMC(row,col){ for (var i in this.fklx) { if (this.fklx[i].dmbh==row.fklx){ return this.fklx[i].dmnr } } }, getGLBZMC(row,col){ for (var i in this.glbz) { if (this.glbz[i].dmbh==row.glbz){ return this.glbz[i].dmnr } } } } } </script>