Avue 表格动态禁止

最新推荐文章于 2026-06-14 09:06:56 发布

原创最新推荐文章于 2026-06-14 09:06:56 发布 · 3.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

avue

本文介绍如何在Avue框架中实现表格的动态禁止操作，通过代码示例展示具体步骤和效果。

效果如下

在这里插入图片描述

代码实现

optinon:{
    coloun:[
        {
            label: '是否打折',
            prop: 'isCanDiscount',
            dataType: 'number',
            type: 'select',
            dicUrl: '/api/...',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            change: (v) => {
              //获取渲染列
              var cols = this.option.column
              var obj = null
              cols.forEach((item) => {
                //找到操作对象
                if (item.prop === 'usedFor') {
                  obj = item
                }
              })
              //根据需要进行操作，比如隐藏display:true 禁用 disabled
              if (v.value === 0) {
                obj.disabled = true
              } else {
                obj.disabled = false
              }
            },
          },
         {
            label: '适用范围',
            prop: 'usedFor',
            dataType: 'number',
            type: 'select',
            disabled: 'false',
            dicUrl: '/api/....',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
    ]
}

标签

#前端 #vue.js