vue2项目使用ant design vue组件库table组件时设置column根据接口返回的字段值显示不同内容

需求：vue2项目使用ant design vue组件库table组件时设置column根据接口返回的字段值显示不同内容

举例：

1、引用table：

    
      
        {{$t('m.edit')}}
        
        
          
            {{$t('m.ydel')}}
          
        
      
    

2、在data中设置变量

 columns: [
          { title: this.$t('m.name'), dataIndex: 'name', key: 'name', align: 'center' },
          {
            title: this.$t('m.type'),
            dataIndex: 'type',
            key: 'type',
            align: 'center',
            customRender: text => {
              if (text == 1) {
                return this.$t('m.message')
              } else if (text == 2) {
                return this.$t('m.mail')
              } else if (text == 4) {
                return this.$t('m.SingaporeApi')
              }
            }
          },
          {
            title: this.$t('m.Operation'),
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            width: '10%',
            scopedSlots: { customRender: 'action' }
          }
        ]

总结：

可以通过customRender直接设置，也可以通过scopedSlots在html中用插槽设置