el-form 中添加el-table ,el-table中的input赋值后不能编辑

<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
                })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-dialog和el-table的数据联动可以通过以下几个步骤实现: 1. 在el-dialog定义需要编辑的表单字段,绑定表单数据对象。 ```html <el-dialog v-model="dialogVisible" title="编辑数据"> <el-form :model="formData" ref="form"> <!-- 表单字段 --> <el-form-item label="名称" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="formData.age"></el-input> </el-form-item> <!-- 其他表单字段 --> </el-form> </el-dialog> ``` 2. 在el-table定义展示数据的列,并绑定数据列表。 ```html <el-table :data="tableData"> <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <!-- 其他列 --> </el-table> ``` 3. 在页面使用Vue的双向数据绑定,将el-dialog的表单数据与el-table的数据列表进行联动。 ```javascript export default { data() { return { dialogVisible: false, // 控制对话框显示隐藏 formData: {}, // 表单数据对象 tableData: [], // 数据列表 }; }, methods: { editData(row) { this.formData = { ...row }; // 将选行的数据赋值给表单对象 this.dialogVisible = true; // 打开对话框 }, saveData() { // 保存数据逻辑 // 更新tableData对应的数据 // 关闭对话框 }, }, }; ``` 在el-dialog编辑按钮绑定`editData`方法,当点击编辑按钮时,会将选行的数据赋值给表单对象,并打开el-dialog对话框。 在el-dialog的保存按钮绑定`saveData`方法,当点击保存按钮时,执行保存数据的逻辑,更新tableData对应的数据,并关闭el-dialog对话框。 这样就实现了el-dialog和el-table的数据联动。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值