当前位置:   article > 正文

ant-design-vue a-table通过字段的状态展示对应的文字,三元表达式多个条件判断,后端返数字,前端展示文字_antd vue table展示映射字段

antd vue table展示映射字段

实现方式一、
在data的columns中,通过scopedSlots渲染名叫type的插槽

  1. columns: [
  2. {
  3. title: '类型',
  4. dataIndex: 'CertificationType',
  5. scopedSlots: { customRender: 'type' },
  6. },
  7. ],

在a-table中

  1. <span slot="type" slot-scope="text,record">
  2. <span v-if="record.CertificationType==0">企业</span>
  3. <span v-else-if="record.CertificationType==1">个人</span>
  4. <span v-else-if="record.CertificationType==null">- -</span>
  5. </span>

实现方式二、
只需要在data的columns中通过customRender 进行三元表达式多个条件判断即可

  1. {
  2. title: '类型',
  3. dataIndex: 'CertificationType',
  4. customRender: (text, record, index) => text?(text == 0 ? '企业' : '个人'):'--',
  5. },

实现方式三、

  1. columns: [
  2. {
  3. title: '类型',
  4. dataIndex: 'CertificationType',
  5. scopedSlots: { customRender: 'type' },
  6. },
  7. ],

在a-table中

  1. <span slot="type" slot-scope="text">{{ auditState[text] }}</span>
  2. data
  3. auditState:{
  4. 0: "企业",
  5. 1: "个人",
  6. 2"--"
  7. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/253738
推荐阅读
相关标签
  

闽ICP备14008679号