根据索引显示支付方式-CSDN博客

本文链接：https://blog.csdn.net/weixin_44663523/article/details/127794906

这篇博客探讨了在Vue.js中使用组件和数据过滤的方法。示例展示了如何创建一个支付方式选择表单，其中包含不同支付选项。写法2通过过滤器隐藏了特定支付方式（信贷），而不改变其后的索引。这种做法在需要动态控制显示内容时非常有用。

摘要由CSDN通过智能技术生成

正确写法1.

<th-form-item label="支付方式:">
            <th-radio-group v-model="formData.paymentMethodCode" :disabled="originPayType === 5">
              <th-radio :label="item.id" :disabled="params.feeStatus !== '未交'" v-for="(item, index) in payTypes" :key="index">{{item.name}}</th-radio>
            </th-radio-group>
          </th-form-item><br />

if(this.formType === 'franchiseFee') {
    return [{
    id:1,
    name:'转账',},{
    id:2,
    name: '分期'},{
    id:3,
    name: '转账+分期'
    },{
    id:5,
    name:'结算抵扣'，
    }
}]，

}

写法2.

if(this.formType === 'franchiseFee') {
    return [{'转账','分期','转账+分期','信贷','结算抵扣'}]

}

写法3.

if(this.formType === 'franchiseFee') {
    return [{
    id:1,
    name:'转账',},{
    id:2,
    name: '分期'},{
    id:3,
    name: '转账+分期'
    },{
    id:4,
    name: '信贷',
    },{
    id:5,
    name:'结算抵扣'，
    }
}]，

}

写法2.如果我们想隐藏掉信贷，但是不改变后面的index,我们可以用filter

<th-radio-group v-model="formData.paymentMethodCode" :disabled="originPayType === 5">
              <th-radio :label="item.id" :disabled="params.feeStatus !== '未交'" v-for="(item, index) in payTypes" :key="index">{{item.name}}</th-radio>
            </th-radio-group>

 <th-form-item label="支付方式:">
            <th-radio-group v-model="formData.paymentMethodCode" :disabled="originPayType === 5">
              <th-radio :label="item.id" :disabled="params.feeStatus !== '未交'" v-for="(item, index) in payTypes.filter(items => items.name !== '信贷')" :key="items.id">{{items.name}}</th-radio>
            </th-radio-group>
          </th-form-item><br />