el-form 中添加el-table ，el-table中的input赋值后不能编辑-优快云博客

本文链接：https://blog.youkuaiyun.com/addUpGirl/article/details/132555048

文章描述了一个在前端表格中，尝试给enName为chnlId的输入框设置初始值7001并禁用编辑的问题。原始代码使用map方法时遇到编辑问题，通过使用Vue的$set方法解决。主要内容涉及表格列配置、数据处理和状态管理。

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

<el-form-item label="报文体参数">
                                <el-table border :data="form.reqBody" :key="bodyKey" style="width: 100%; margin-top: -13px"
                                    :row-key="getRowKey" :tree-props="{ children: 'children' }">
                                    <el-table-column label="中文名称" prop="cnName" width="150">
                                    </el-table-column>
                                    <el-table-column label="英文名称" prop="enName" width="100">
                                    </el-table-column>
                                    <el-table-column label="参数值" width="100" v-if="!callBackApi">
                                        <template slot-scope="scope">
                                            <el-input placeholder="value" v-model="scope.row.propValue"
                                                :disabled="scope.row.disabled"
                                                @change="changeInputValue(scope.row.enName, scope.row.propValue)"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="域类型" prop="type" width="100">
                                    </el-table-column>
                                    <el-table-column label="域长度" prop="len" width="80">
                                    </el-table-column>
                                    <el-table-column label="默认值" prop="defaultVal" width="80">
                                    </el-table-column>
                                    <el-table-column label="请求要求" prop="demand" width="100">
                                    </el-table-column>
                                    <el-table-column label="备注">
                                        <template slot-scope="scope">
                                            <span>{{ scope.row.remark }}</span>
                                            <el-button v-if="scope.row.remark.includes('查看详情')"
                                                @click="checkDetail(scope.row.remarkDetail)">查看详情</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>

给enName为chnlId 的input赋初始值7001。结果却不能编辑修改

 form.reqBody = form.reqBody.map(item => {
                    if (item["enName"] === "chnlId") {
                        item["propValue"] = '7001'
                        item["remark"] = item["remark"] + " 此默认值不可用于生产"
                    }
                    let middleArr = ["Qid", "qid", "transSeqId", "transSeq", "origTransSeq", "traceId", "reqId"];
                    if (middleArr.includes(item["enName"])) {
                        item["remark"] = item["remark"] + " 无论发送成功或失败此id都只能用一次，不能重复使用"
                    }
                    // entityTp 关联过滤  // 报文体参数entityTp 禁用相关联字段
                    let middleFilterArr = this.allLines.map(twice => { return twice.apiId });
                    if (middleFilterArr.includes(this.apiId)) {
                        let middleOneObj = [];
                        let middleEntityCode = this.allLines.filter(twice => {
                            return twice.apiId === this.apiId
                        })[0].code;
                        for (let third in middleEntityCode) {
                            middleEntityCode[third].forEach(fourth => {
                                middleOneObj.push(fourth)
                            })
                        }
                        let finalParams = [... new Set(middleOneObj)]
                        if (finalParams.includes(item["enName"])) {
                            item['disabled'] = true;
                        }
                    }
                    return item
                })

后来改成以下代码，问题解决。

 form.reqBody = form.reqBody.map(item => {
                    if (item["enName"] === "chnlId") {
                        this.$set(item,"propValue","7001")
                        item["remark"] = item["remark"] + " 此默认值不可用于生产"
                    }
                    let middleArr = ["Qid", "qid", "transSeqId", "transSeq", "origTransSeq", "traceId", "reqId"];
                    if (middleArr.includes(item["enName"])) {
                        item["remark"] = item["remark"] + " 无论发送成功或失败此id都只能用一次，不能重复使用"
                    }
                    // entityTp 关联过滤  // 报文体参数entityTp 禁用相关联字段
                    let middleFilterArr = this.allLines.map(twice => { return twice.apiId });
                    if (middleFilterArr.includes(this.apiId)) {
                        let middleOneObj = [];
                        let middleEntityCode = this.allLines.filter(twice => {
                            return twice.apiId === this.apiId
                        })[0].code;
                        for (let third in middleEntityCode) {
                            middleEntityCode[third].forEach(fourth => {
                                middleOneObj.push(fourth)
                            })
                        }
                        let finalParams = [... new Set(middleOneObj)]
                        if (finalParams.includes(item["enName"])) {
                            item['disabled'] = true;
                        }
                    }
                    return item
                })