iview table中按鈕根據條件設置disabled

一、效果展示

 

 

 

 

 

 說明：當表格中存在未退款狀態的記錄，退款按鈕可用，當不存在未退款狀態的記錄，退款按鈕不可用

二、實現代碼

方法一：

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的方法，然后才知道在哪里入的坑，建議大家一定要看准類型，不要入坑啊๑乛◡乛๑卡在了奇怪的地方