el-table 用formatter 将接口返回的多个数字类型的字符串转换成对应汉字

monkey-7

已于 2024-03-05 17:07:46 修改

阅读量1.2k

点赞数 3

分类专栏： element-ui 工作笔记文章标签： vue.js elementui 前端

于 2022-07-13 16:52:41 首次发布

本文链接：https://blog.csdn.net/qq_39669919/article/details/125767350

版权

工作笔记同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

element-ui

21 篇文章 0 订阅

订阅专栏

formatter ：用来格式化内容

<el-table-column label="支付方式" width="180" prop="payTypes" :formatter="formatType" show-overflow-tooltip header-align="center" align="center"></el-table-column>

后台返回的数据结构是这样的

 list:[
	  {  id:'MK00000001',  payTypes:'1,3'},                
      {  id:'MK00000002',  payTypes:'1,2,3,4,5'},
	  {  id:'MK00000003',  payTypes:'1,2,3,4,5'}
 ]

将payTypes的属性值根据逗号截取

   formatType(row, column) {
	let payTypeList = row.payTypes.split(",")
        for (var i = 0; i < payTypeList.length; i++) {
          switch (payTypeList.length - i) {
            case 1: {
              payTypeList[i] = '现金 '
              break;
            }
            case 2: {
              payTypeList[i] = '微信 '
              break;
            }
            case 3: {
              payTypeList[i] = '支付宝 '
              break;
            }
            case 4: {
              payTypeList[i] = '银联 '
              break;
            }
            case 5: {
              payTypeList[i] = '其他 '
              break;
            }
          }
        }
        return payTypeList
      },