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

最新推荐文章于 2024-01-11 14:31:05 发布

String佳佳

最新推荐文章于 2024-01-11 14:31:05 发布

阅读量1.8w

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44171757/article/details/95069472

本文介绍了一种使用HTML和JS在Elment UI的表格组件中将数据列转换为中文描述的方法。通过给每列绑定formatter属性并设置为函数，可以实现数据的动态翻译，提升表格数据的可读性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>