在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';