iview table中按钮根据条件设置disabled

一、效果展示

 

 说明：当表格中存在未退款状态的记录，退款按钮可用，当不存在未退款状态的记录，退款按钮不可用

二、实现代码

方法一：

disabled后直接跟true或者false的条件

 {
          title: '支付方式',
          key: 'paytype',
          //  250,
          align: 'center',
          render: (h, params) => {
            return h('div', this.getPayType(params.row.paytype));
          },
        },
        {
          title: '订单状态',
          key: 'orderstate',
          //  250,
          align: 'center',
          render: (h, params) => {
            return h('div', this.getOrderState(params.row.orderstate));
          },
        },
        {
          title: '操作',
          key: 'id',
          //  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',
          //  250,
          align: 'center',
          render: (h, params) => {
            return h('div', this.getPayType(params.row.paytype));
          },
        },
        {
          title: '订单状态',
          key: 'orderstate',
          //  250,
          align: 'center',
          render: (h, params) => {
            return h('div', this.getOrderState(params.row.orderstate));
          },
        },
        {
          title: '操作',
          key: 'id',
          //  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的方法，然后才知道在哪里入的坑，建议大家一定要看准类型，不要入坑啊๑乛◡乛๑卡在了奇怪的地方