在vue中场景，循环行，点击当前行编辑数据-优快云博客

当前列表

　　点击编辑，行变为编辑框。

<Row style="color:#999;margin-bottom:11px">
                    <Row style="margin-bottom:10px" v-for='(item,index) in jiujie' :key=item.name>

                        <Row v-if='item.vis'>
                            <Col span="8">
                            {{item.name}}
                            </Col>
                            <Col span="2">
                            {{item.value}}
                            </Col>
                            <Col span="8" offset="6" style="vertical-align: middle">
                            <Button size='small' type="primary" @click='sdel(index)'>删除</Button>
                            &nbsp;
                            <Button size='small' @click="edits(item)">编辑</Button>
                            </Col>
                        </Row>

                        <Row v-if='!item.vis'>
                            </form>
                            <Col span="8">
                            <Input style="width:75%" v-model='jiujie[index].name' />
                            <div class='sdiv' :id="forId(index)">请输入变量名</div>
                            </Col>
                            <Col span="2">
                            <Select v-model="valueSelect">
                                <Option value="普通变量">普通变量
                                </Option>
                            </Select>
                            </Col>
                            <Col span="6">
                            <Input style="width:75%" v-model='jiujie[index].value' />
                            </Col>
                            <Col span="8" style="vertical-align: middle">
                            <Button size='small' type="primary" @click='save(item,index)'>保存</Button>
                            &nbsp;
                            <Button size='small' @click="changevis(item,index)">取消</Button>
                            </Col>
                        </Row>

                    </Row>

                    <Row style="margin-top:15px">
                        <Col span="4" offset="8" style="color:#2db7f5 ;font-size:14px;">
                        <div style="cursor: pointer;" @click='addenvir'>
                            <Icon type="ios-add" />添加环境变量</div>
                        </Col>
                    </Row>

                </Row>

通过在循环的数组中对象中添加新的元素控制显示隐藏，

通过es6 map方法

this.envirconfig.map((item, index) => {

                            this.jiujie.push(Object.assign({}, item, {
                                vis: true,
                            }))

                        });

验证的话是动态加入id，验证之后通过控制id添加样式

 forId: function (index) {
                return "a" + index;
            },

document.getElementById(id).style.display = 'block';

转载于:https://www.cnblogs.com/xu-nian-qin/p/11082644.html