jeecg编辑表单时有不想修改的表单项

最新推荐文章于 2024-04-23 15:43:19 发布

米泽玄師

最新推荐文章于 2024-04-23 15:43:19 发布

阅读量972

点赞数 1

分类专栏： jeecg-boot 文章标签： vue jeecg

本文链接：https://blog.csdn.net/level_tiller/article/details/120747653

版权

jeecg-boot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细探讨了如何在前端表单中通过data属性和JSON判断来实现selectDisabled的动态禁用，包括设置初始状态、编辑操作中的状态切换以及使用$nextTick确保数据同步。实例展示了在Vue中如何结合环境记录判断启用/禁用环境输入框。

摘要由CSDN通过智能技术生成

比如：
1.加:disabled=“selectDisabled”

<a-form-item label="环境名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['envName']" placeholder="请输入环境名称" :disabled="selectDisabled"></a-input>
            </a-form-item>

2.data（）中selectDisabled: false

data() {
            return {
                。。。
                //相应参数编辑时是否禁用
                selectDisabled: false,
            }
        },

3.JSON.stringify(record) !== '{}'时重点

add() {
                this.selectDisabled = false
                this.edit({})
            },
edit(record) {
                this.form.resetFields();
                this.model = Object.assign({}, record);
                this.visible = true;
                //编辑时
                if (JSON.stringify(record) !== '{}') {
                    this.selectDisabled = true
                }
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model, 'createrId', 'createBy', 'createTime', 'updateId', 'updateBy', 'updateTime', 'appId', 'remark', 'envName', 'envIdentifier'))
                })

            },