admin管理员组文章数量:1640603
一、效果展示
说明:当表格中存在未退款状态的记录,退款按钮可用,当不存在未退款状态的记录,退款按钮不可用
二、实现代码
方法一:
disabled后直接跟true或者false的条件
{ title: '支付方式', key: 'paytype', // width: 250, align: 'center', render: (h, params) => { return h('div', this.getPayType(params.row.paytype)); }, }, { title: '订单状态', key: 'orderstate', // width: 250, align: 'center', render: (h, params) => { return h('div', this.getOrderState(params.row.orderstate)); }, }, { title: '操作', key: 'id', // width: 100, align: 'center', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'primary', size: 'small', disabled: (params.row.canreturnprice === '0.00'), }, on: { click: () => { this.$parent.addRemarks(params.row); }, }, }, '退款'), ]); }, },
方法二:
disabled后跟方法名,该方法返回true或者false
{ title: '支付方式', key: 'paytype', // width: 250, align: 'center', render: (h, params) => { return h('div', this.getPayType(params.row.paytype)); }, }, { title: '订单状态', key: 'orderstate', // width: 250, align: 'center', render: (h, params) => { return h('div', this.getOrderState(params.row.orderstate)); }, }, { title: '操作', key: 'id', // width: 100, align: 'center', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'primary', size: 'small', disabled: this.disabled(), }, on: { click: () => { this.$parent.addRemarks(params.row); }, }, }, '退款'), ]); }, },
disabled() { let result = true; for (let i = 0; i < this.cardCancelInfo.length; i++) { console.log(this.cardCancelInfo[i]); if (this.cardCancelInfo[i].canreturnprice === '0.00') { result = true; } else { result = false; } } console.log(result); return result; },
三、需要注意的地方
disabled: (params.row.canreturnprice === '0.00'),
条件一定为true或者false
整形用
disabled: (params.row.canreturnprice === 0.00),
字符串用
disabled: (params.row.canreturnprice === '0.00'),
因为这个类型的问题,改了无数遍,试了无数的方法,就是觉得自己写的对,就是实现不了,真是要哭了o(╥﹏╥)o
最后灵光一现,把条件的结果输出出来,因为删除是动态的,因此使用方法二,在watch中监听disabled的方法,然后才知道在哪里入的坑,建议大家一定要看准类型,不要入坑啊๑乛◡乛๑卡在了奇怪的地方
转载于:https://wwwblogs/wangyuxue/p/11435018.html
版权声明:本文标题:iview table中按钮根据条件设置disabled 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729320549a1195829.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论