vue配合el-table 根据绑定记录的值自定义el-table-column显示问题

使用formatter来实现:

代码如下：

 

methods: {

     statusFormat: function(row, column) {

        let status = row.status;

        let statusW = "未缴费";

        if(status == undefined) {     

              statusW = "未缴费";     

        }  

       switch(status) {

           case 1:

           statusW = "已缴费";

           break;

          case 2:

          statusW = "退款申请中";

          break;

     }

       return statusW;

 }

}

方法解析： 

switch 语句用法

功能：switch语句是多分支选择语句.用来实现多分支选择结构.if语句只有两个分支可供选择,而实际问题中常常要用到多分支的选择.例如,学生成绩分类(90为"A"等,80-89分为'B'等,70-90分为'C'等......).当然这些都可以用嵌套的if语句来外理,但如果分支较多,则嵌套的if语句层数多,程序沉余长而且可读性降低.C语言提供switch语句直接外理多分支选择,它相当于PASCAL语言中的CASE语句.

形式：switch(表达式)
{
case 常量表达式 1:语句 1
case 常量表达式 2:语句 2
.
.
.
case 常量表达式 n:语句 n
default:语句 n+1
}
例如,要求按照考试成绩的等级打印出百分制分数段,可以用switch语句实现:
switch(grade)
{
case 'A':printf("85-100\n");
case 'B':printf("70-84\n");
case 'C':printf("60-69\n");
case 'D':printf("<60\n");
default:printf("error\n");
}

说明:
(1) switch后面括弧内的"表达式"，ANSI标准允许它为任何类型.
(2) 当表达式的值与某一个case后面的常量表达式的值相等时，就执行此case后面的语句，若所有的case中的常量表达式的值都没有与表达式的匹配的，就执行default后面的语句.
(3) 每一个case的常量表达式的值必须互不相同，否则就会出现互相矛盾的现象(对表达式的同一个值，有两种或多种执行方案).
(4) 各个case各default的出现次序不影响执行结果。例如，可以先出现"default: ...",再出现"case 'D': ...",然后是"case 'A': ...".
(5) 执行完一个case后面的语句后，流程控制转移到下一个case继续执行."case常量表达式"只是起语句标号作用，并不是在该处进行条件判断.在执行swith语句时,根据switch后面表达式的值找到匹配的入口标号,就从此标号开始执行下去,不再进行判断.例如,上面的例子中,若grade的值等于'A',则将连续输出:
85-100
70-84
60-69
<60
error
因此,应该在执行一个case分支后,使流程跳出switch结构,即终止switch语句的执行.
可以用一个break语句来达到此目的.将上面的switch结构改写如下:
switch(grade)
{
case 'A':printf("85-100\n"); break;
case 'B':printf("70-84\n"); break;
case 'C':printf("60-69\n"); break;
case 'D':printf("<60\n"); break;
default:printf("error\n");
}
最后一个分支(default)可以不加break语句.如果grade的值为'B',则只输出"70-84".
在case后面中虽然包含一个以上执行语句,但可以不必用花括弧括起来,会自动顺序执行本case后面所有的执行语句.当然加上花括弧也可以.
(6) 多个case可以共用一组执行语句,例如:
.
.
.
case 'A':
case 'B':
case 'C': printf(">60\n");break;
.
.
.
grade的值为'A','B'或'C'时都执行同一组语句.