解決vue前端不顯示自定義字段

 

 

 

 

 

前端添加代碼

<span slot="roles" slot-scope="roles">
  <a-tag
    v-for="role in roles"
    :key="role.id"
    :color="role.role__name === 'loser' ? 'volcano' : role.role__name.length > 5 ? 'geekblue' : 'green'"
  >
    {{ role.role__zh_name}}
  </a-tag>
</span>


  {
    title: '角色02',
    key: 'roles',
    dataIndex: 'roles',
    scopedSlots:{customRender:'roles'}
  },

 

后端代碼

解決前

class UserSerializer(serializers.ModelSerializer):
    #自定義字段並反向查詢
    roles=serializers.SerializerMethodField(required=False)

    def validate(self,attrs):
        return attrs
    class Meta:
        model=User
        fields='__all__'
        read_only_fields=('',)
        extra_kwargs={
            "address":{
                "min_length":5,
                "default":"默認測試地址"
            }
        }

    filter_fields = ('username',)

    # def create(self,data):
    #     print(data)
    #     username=data.get('username','')

    #
    #獲取過濾后自定義字段展示的數據
    def get_roles(self,row):
        roles_obj_list=UserRole.objects.filter(user=row).values('role__id','role__zh_name','role__name')
        return roles_obj_list

 

解決后

class UserSerializer(serializers.ModelSerializer):
    #自定義字段並反向查詢
    roles=serializers.SerializerMethodField(required=False)

    def validate(self,attrs):
        return attrs
    class Meta:
        model=User
        fields='__all__'
        read_only_fields=('',)
        extra_kwargs={
            "address":{
                "min_length":5,
                "default":"默認測試地址"
            }
        }

    filter_fields = ('username',)

    # def create(self,data):
    #     print(data)
    #     username=data.get('username','')

    #
    #獲取過濾后自定義字段展示的數據
    def get_roles(self,row):
        roles_obj_list=UserRole.objects.filter(user=row).values('role__id','role__zh_name','role__name')
        return roles_obj_list