vue 过滤器 filters（结合antd表格案例）

1st、项目需求：

接口返回数字，前台根据数字匹配显示对应内容，此处案例一共有六种情况，如果使用三目运算符写代码太过绕，所以采用vue过滤器功能相对简洁快速。

2nd、代码实现

A、html中：

<standard-table
                rowKey="id"
                :columns="columns"
                :dataSource="thresholds"
                :pagination="false"
            >
                <div slot="level" slot-scope="{ record }">
                    <span>{{ record.level | levelFilter }}</span>
                </div>
          </standard-table>
         

B、初始化表格

data() {
  return {
    columns:[
    { title: '级别', scopedSlots: { customRender: 'level' }}, //‘level’变量名与HTML中的slot保持一致
    { title: '级别编号', dataIndex: 'levelCode' },
    { title: '阈值', dataIndex: 'threshold' },
];
  }
}

C、filters 里写方法

levelFilter(val) {
            // console.log(val)
            switch(val) {
                case 1 :
                val = 'I 类';
                break;
                case 2 :
                val = 'II 类';
                break;
                case 3 :
                val = 'III 类';
                break;
                case 4 :
                val = 'IV 类';
                break;
                case 5 :
                val = 'V类';
                break;
                case 6 :
                val = '劣V类';
                break;
            }
             return val; // 记得此处一定要return啊
    
        }

3rd、看页面效果，over ❥(^_-)