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

最新推荐文章于 2023-07-05 10:10:21 发布

aoyueli3211

最新推荐文章于 2023-07-05 10:10:21 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyuxue/p/11435018.html

本文介绍在Vue项目中，如何根据表格中订单状态动态控制退款按钮的可用性。通过两种方法实现：直接在disabled属性后跟条件判断或调用返回布尔值的方法。文章强调类型检查的重要性，避免因类型不匹配导致的功能异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果展示

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

二、实现代码

方法一：

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://www.cnblogs.com/wangyuxue/p/11435018.html